HTML | DOM 样式 columnRuleStyle 属性

1. 简介

columnRuleStyle 属性用于设置多列布局中分隔线的样式。分隔线是在多个列之间绘制的垂直线条。

2. 语法

<div style="column-count:3; column-rule-style:dotted; column-rule-width:5px;"></div>

3. 属性值

columnRuleStyle 属性支持以下值：

• none：无分隔线
• hidden：和 none 表现一样
• dotted：虚线
• dashed：点线
• solid：实线
• double：双实线
• groove：3D凹槽
• ridge：3D垄状线
• inset：3D向内凸出线
• outset：3D向外凸出线
• inherit：继承父级元素的属性值

4. 实例

以下展示了五个具有不同边框样式的多列布局：

4.1 虚线

<div style="column-count:3; column-rule-style:dotted;"></div>

4.2 实线

<div style="column-count:3; column-rule-style:solid;"></div>

4.3 双实线

<div style="column-count:3; column-rule-style:double;"></div>

4.4 3D凹槽

<div style="column-count:3; column-rule-style:groove;"></div>

4.5 3D向内凸出线

<div style="column-count:3; column-rule-style:inset;"></div>

5. 注意事项

• columnRuleStyle 属性必须与 column-count 和 column-rule-width 属性一起使用。
• columnRuleStyle 属性必须在外部样式表（CSS）中定义，以便在多个页面中重用。
• columnRuleStyle 属性不是所有浏览器都支持，尤其是旧版本的浏览器不支持。