大家好，欢迎来到IT知识分享网。
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> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/112111.html
