CSS3 column-rule-style 属性

CSS 属性 column-rule-style 用于设置多列布局中列之间的分隔线的样式。它可以接受以下值：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双实线
• groove：凹槽线
• ridge：凸槽线
• inset：内嵌线
• outset：外凸线
• none：无线条

语法

column-rule-style: value;

值

• value：指定用于分隔线的样式值。可以是上述任意一个值。

示例

// www.javascriptcn.com code example
/* 设置列分隔线为实线 */
.column {
  column-count: 3;
  column-rule-style: solid;
}

/* 设置列分隔线为虚线 */
.column {
  column-count: 3;
  column-rule-style: dashed;
}

/* 设置列分隔线为双实线 */
.column {
  column-count: 3;
  column-rule-style: double;
}

在多列布局中，使用 column-rule-style 可以为列之间添加不同样式的分隔线，从而使布局更加美观和易于阅读。