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 = 
<'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;

规范

Specification
Unknown specification
# column-rule

浏览器兼容性

BCD tables only load in the browser