border的属性及写法

转载已于 2024-08-20 14:36:04 修改

· 165 阅读

0 ·

版权

原文链接：https://blog.youkuaiyun.com/Originally_M/article/details/88818183

文章标签：

#前端 #vue

于 2024-08-20 13:18:22 首次发布

前端专栏收录该内容

3 篇文章

订阅专栏

属性	含义
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>