CSS3 column-rule-style 属性

css3 column-rule-style 属性可以用于设置多列布局中的列线的样式。当使用 CSS3 列布局时，我们可以在多列之间插入线条以增强页面的可读性和美观性。

语法

通过使用 column-rule-style 属性，我们可以为多列设置不同的样式：

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性值解释

none

没有列线。

hidden

列线被隐藏。

dotted

列线由一系列圆点组成。

dashed

列线由一系列虚线组成。

solid

列线由一条实线组成。

double

列线由两条实线组成。

groove

列线花纹效果，看起来像一个凹槽。

ridge

列线花纹效果，看起来像一个凸出的形状。

inset

列线花纹效果，看起来像一个凹进去的形状。

outset

列线花纹效果，看起来像一个膨胀形状。

initial

设置属性为它的默认值。

inherit

从父元素继承该属性。

使用示例

.column-rule {
  -webkit-column-rule-style: solid; /* Safari 8.0 - 9.0, iOS 8.0 - 9.2, Chrome 50 */
  column-rule-style: solid;
}

在上面的示例中，我们为一个多列布局添加了实线的列线样式。

浏览器支持

column-rule-style 属性现在在所有主流浏览器中都支持。

总结

CSS3 column-rule-style 属性允许我们控制多列布局之间添加的列线的样式。通过改变 column-rule-style 属性值，我们可以创建不同样式的列线，以使设计更加美观和易读。该属性在所有主流浏览器中都得到了支持，因此可以放心使用。