border的属性及写法大全:实线、点线、虚线、双线、混合用法

border的属性及写法:

属性含义
solid实线
dotted点线
dashed虚线
double双线
单项写法及效果演示:

(后面有完整代码)

1.实线
 // 1. 实线:solid 
     .border1{
          border: 1px solid #666; 
      }

实线效果:
在这里插入图片描述

2.点线
 //  2. 点线:dotted 
      .border2{
           border: 1px dotted #666;
      }

点线效果:
在这里插入图片描述

3.虚线
 //  3. 虚线:dashed 
     .border3{
             border: 1px dashed #666;
      }

虚线效果:
在这里插入图片描述

4.双线

注意:双线的边框宽度不能小于3px

 //  4. 双线:double 
      .border4{
             border: 3px double #666;
       }

双线效果:
在这里插入图片描述

5.混合使用(一)

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

    .border5{
           /* 四个值时边框顺序:1上 2右 3下 4左 */
           border-style:dotted solid double dashed;
       }

混合使用(一)效果:
在这里插入图片描述

6.混合使用(二)

上边框是点状
右边框和左边框是实线
下边框是双线

     .border6{
           /* 三个值时边框顺序:1上 2左右 3下 */
          border-style:dotted solid double;
       }

混合使用(二)效果:
在这里插入图片描述

7. 混合使用(三)

上边框和下边框是点状
右边框和左边框是实线

    .border7{
           /* 两个值时边框顺序:1上下 2左右*/
         border-style:dotted solid;
       }

混合使用(三)效果:
在这里插入图片描述

完整代码:

   <!DOCTYPE html>
	<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		    <title>border属性的完整代码</title>
		    <style>
		        * {
		            margin: 0;
		            padding: 0;
		        }
		        body {
		            background: #E8F2FC;
		            padding-top: 50px;
		        }
		        div {
		            width: 60%;
		            height: 50px;
		            line-height: 50px;
		            margin: 40px auto;
		           text-align: center
		        }
		        /* 1. 实线:solid */
		        .border1{
		            border: 1px solid #666; 
		        }
		        /* 2. 点线:dotted */
		        .border2{
		             border: 1px dotted #666;
		        }
		        /* 3. 虚线:dashed */
		        .border3{
		             border: 1px dashed #666;
		        }
		        /* 4. 双线:double */
		        .border4{
		             border: 3px double #666;
		        }
		        /* 5. 混合使用(一) */
		        .border5{
		            /* 四个值时边框顺序:1上 2右 3下 4左 */
		            border-style:dotted solid double dashed;
		        }
		        /* 6. 混合使用(二) */
		        .border6{
		            /* 三个值时边框顺序:1上 2左右 3下 */
		           border-style:dotted solid double;
		        }
		        /* 7. 混合使用(三) */
		        .border7{
		            /* 两个值时边框顺序:1上下 2左右*/
		          border-style:dotted solid;
		        }
		    </style>
		</head>
		<body>
		    <!-- 1.实线 -->
		    <div class="border1"> 1.实线边框</div>
		    <!-- 2.点线 -->
		    <div class="border2"> 2.点线边框</div>
		    <!-- 3.虚线 -->
		    <div class="border3"> 3.虚线边框</div>
		    <!-- 4.虚线 -->
		    <div class="border4"> 4.双线边框</div>
		    <!-- 5.混合使用 -->
		    <div class="border5"> 5.混合使用(一)</div>
		    <!-- 6.混合使用 -->
		    <div class="border6"> 6.混合使用(二)</div>
		    <!-- 7.混合使用 -->
		    <div class="border6"> 7.混合使用(三)</div>
		    
		</body>
	</html>

整体效果演示:
在这里插入图片描述

  • 55
    点赞
  • 226
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值