CSS3 column-rule-style 属性
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
属性现在在所有主流浏览器中都支持。
Chrome | Firefox | Safari | Opera | IE | Edge |
---|---|---|---|---|---|
50+ | 52+ | 6.1+ | 37+ | 10+ | 12+ |
总结
CSS3 column-rule-style 属性允许我们控制多列布局之间添加的列线的样式。通过改变 column-rule-style 属性值,我们可以创建不同样式的列线,以使设计更加美观和易读。该属性在所有主流浏览器中都得到了支持,因此可以放心使用。