column-rule - CSS（层叠样式表）编辑

概述

在多列布局中，column-rule 属性规定了列与列之间的直线，也称“规则”。该简写可以避免单独设置各个 column-rule-* 属性：column-rule-width，column-rule-style 和 column-rule-color。

初始值	as each of the properties of the shorthand: `column-rule-width`: `medium` `column-rule-style`: `none` `column-rule-color`: `currentcolor`
适用元素	multicol elements
是否是继承属性	否
计算值	as each of the properties of the shorthand: `column-rule-color`: computed color `column-rule-style`: as specified `column-rule-width`: the absolute length; `0` if the `column-rule-style` is `none` or `hidden`
Animation type	as each of the properties of the shorthand: `column-rule-color`: a color `column-rule-style`: discrete `column-rule-width`: a length

语法

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!