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>

整体效果演示:
border的属性及写法大全:实线、点线、虚线、双线、混合用法_第1张图片

你可能感兴趣的:(Css3常用样式)