CSS column-rule-style属性用于在多列布局中指定列与列之间通过column rule属性设置的分隔线的样式。column-rule
是列与列之间的一条垂直分隔线,你可以使用column-rule-width属性来设置分隔线的宽度,使用column-rule-color属性来设置分隔线的颜色,使用column-rule-style
属性来设置分隔线的线条样式。
.浏览器支持
.语法
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
.参数
- none:不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
- hidden:不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
- dotted:列之间的分隔线显示为圆角的矩形。圆角的半径等于分隔线宽度的一半。
- dashed:列之间的分隔线显示为直角矩形组成的虚线。
- solid:列之间的分隔线显示为一条笔直的直线。
- double:列之间的分隔线显示为两条直线,两条直线之间有一些间隙。两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。
- groove:列之间的分隔线显示为内陷浮雕效果。
- ridge:列之间的分隔线显示为外凸浮雕效果。
- inset:列之间的分隔线显示为内斜面效果。
- outset:列之间的分隔线显示为外斜面效果。
column-rule-style
属性的初始值为none
。
.应用范围
column-rule-style
属性可以应用在所有多列布局的元素上。
在一个元素应用column-rule-style
属性的代码如下
.columns { columns: 12em ; column-rule- width : 5px ; column-rule-style: solid ; column-rule- color : #0099CC ; } |