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>
整体效果演示：