border的属性及写法大全:实线、点线、虚线、双线、混合用法 |
您所在的位置:网站首页 › 前端怎么画 › 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; }混合使用(三)效果: 完整代码: border属性的完整代码 * { 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; } 1.实线边框 2.点线边框 3.虚线边框 4.双线边框 5.混合使用(一) 6.混合使用(二) 7.混合使用(三)整体效果演示: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |