border的属性及写法大全：实线、点线、虚线、双线、混合用法

您所在的位置：网站首页 › visio2022怎么画虚线 › border的属性及写法大全：实线、点线、虚线、双线、混合用法

border的属性及写法大全：实线、点线、虚线、双线、混合用法

2024-06-27 22:48| 来源: 网络整理| 查看: 265

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.混合使用（三）

整体效果演示：在这里插入图片描述

【本文地址】

border的属性及写法大全：实线、点线、虚线、双线、混合用法

border的属性及写法大全：实线、点线、虚线、双线、混合用法

今日新闻

推荐新闻