HTML 边框和背景设置

最新推荐文章于 2022-01-18 20:14:04 发布

weixin_43991000

最新推荐文章于 2022-01-18 20:14:04 发布

阅读量2.3k

点赞数 3

文章标签：列表 html css

本文链接：https://blog.csdn.net/weixin_43991000/article/details/107725806

版权

HTML 边框和背景设置

		不简写 list-style-type: none;=== 简写 list-style:none; 去掉列表的样式 （实心圆）
		
		
		
		border-color 边框颜色
		border-width 边框的宽度
		border-style 边框的样式  solid实心线   dashed 虚线  dotted点线  none没有线   double双线
		
		方向
		border-left 左边框  border-right 右边框  border-top 上边框  border-bottom 下边框
		
		上边是虚线
		下边是点线
		左边是双线
		右边实心线
		



		 background-color:背景颜色
		 background-image:背景图
		 background-repeat:背景图是否平铺  repeat 平铺（默认值） no-repeat 不平铺  repeat-x 平铺X轴  repeat-y 平铺y轴
		background-position：背景图的位置  第一个值表示水平方向  left right center 数值  第二个值表示垂直方向 top bottom center 数值
		当水平方向为正值时，往右偏移   取值为负往左走
		当垂直方向为正值时，往下偏移  取值为负往上走

		background-attachment: fixed; 背景图固定

示例代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索框</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        form {
            width: 640px;
            height: 40px;
            margin-top: 2%;
        }

        .shuru {
            width: 554px;
            height: 36px;
            border: none;
            border: 2px solid #ff5000;
            border-right: none;
            border-radius: 20px 0 0 20px;
            float: left;
            list-style: none;
            outline: none;
            background: url('images/20200731194051_03.gif');
            background-position: 517px center;
            background-repeat: no-repeat;
            /* cellpadding: 15px; */
        }

        .dianji {
            width: 74px;
            height: 40px;
            border: none;
            float: left;

            border-radius: 0 20px 20px 0;
            background: #ff5900 url('images/20200731192011_03.gif');
            background-position: center;
            background-repeat: no-repeat;
            outline: none;
            text-indent: 15px;

        }
    </style>
</head>


<body>
    <form action="" method="">
        <input type="text" class="shuru" value="热卖瘦身牛仔背带裤">
        <input type="submit" class="dianji" value="">

    </form>
</body>

</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200801090913439.png)
案例效果