column-rule

概述

在多列布局中，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 typeas 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) ? ? ?