column-rule
Try it
概述
在多列布局中,column-rule
属性规定了列与列之间的直线,也称“规则”。该简写可以避免单独设置各个 column-rule-*
属性:column-rule-width
,column-rule-style
和 column-rule-color
。
初始值 | as each of the properties of the shorthand:
|
---|---|
适用元素 | multicol elements |
是否是继承属性 | 否 |
计算值 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
语法
Formal syntax:<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
column-rule: dotted; column-rule: solid blue; column-rule: solid 8px; column-rule: thick inset blue;
取值
column-rule
属性可以按任何顺序指定为下面列出的一个,两个或三个值。
<'column-rule-width'>
- 定义为
<length>
或是thin
,medium
,thick
关键字的其中一个。请参阅border-width
。 <'column-rule-style'>
- 请参阅
border-style
。 <'column-rule-color'>
- 一个
<color>
值。
示例
p.foo { column-rule: dotted; } /* 与 "medium dotted currentColor" 相同 */ p.bar { column-rule: solid blue; } /* 与 "medium solid blue" 相同 */ p.baz { column-rule: solid 8px; } /* 与 "8px solid currentColor" 相同 */ p.abc { column-rule: thick inset blue; }
运行实例
padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;
规范
规范 | 状态 | 说明 |
---|---|---|
CSS Multi-column Layout Module column-rule |
Working Draft |
浏览器兼容性
BCD tables only load in the browser