column-rule

概述

在多列布局中,column-rule 属性规定了列与列之间的直线,也称“规则”。该简写可以避免单独设置各个 column-rule-* 属性:column-rule-widthcolumn-rule-stylecolumn-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> 或是 thinmediumthick 关键字的其中一个。请参阅 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! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit (en-US) 3.5 (1.9.1)-moz (en-US) 10 11.1 3.0 (522)-webkit (en-US)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ?