翻译不完整。 请帮助我们翻译这篇文章!


In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and 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:
正规顺序per grammar


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;


Accepts one, two or three values in any order: 

Is a <length> or one of the three keywords, thin, medium or thick. See border-width for details.
See border-style for possible values and details.
Is a <color> value.

Examples { column-rule: dotted; }          /* same as "medium dotted currentColor" */ { column-rule: solid blue; }      /* same as "medium solid blue" */
p.baz { column-rule: solid 8px; }       /* same as "8px solid currentColor" */ { column-rule: thick inset blue; }

Live Example

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;


Specification Status Comment
CSS Multi-column Layout Module
Working Draft  

Browser compatibility

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) ? ? ?