column-rule
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
概述
在多列布局中,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 |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes)-webkit | 3.5 (1.9.1)-moz | 10 | 11.1 | 3.0 (522)-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | (Yes) | ? | ? | ? |