列规则 | column-rule

在多列布局中，column-ruleCSS属性指定要在每列之间绘制的直线或“规则”。

column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/* Global values */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

它是一种方便的简写，以避免设定每个单独的column-rule-*单独属性：column-rule-width，column-rule-style和column-rule-color。

• column-rule-width*medium

• column-rule-style*none

• column-rule-color*currentcolor

Applies to multicol elements   [Inherited](inheritance) no   Media visual   [Computed value](computed_value) as each of the properties of the shorthand:

• column-rule-color*计算颜色

• column-rule-style*具体规定

• column-rule-width绝对长度；0如果column-rule-style是none或hidden

Animation type as each of the properties of the shorthand:

• column-rule-color*a颜色

• column-rule-style*离散

• column-rule-width*a长度

Canonical order per grammar  

语法

一个，两个或三个下面列出的值，以任何顺序：

值

<'column-rule-width'>是<length>三个关键词或一个thin，medium或thick。见border-width细节。

<'column-rule-style'>请参阅border-style可能的值和细节。

<'column-rule-color'>是一个<color>价值。

形式语法

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

实例

例1

/* same as "medium dotted currentColor" */
p.foo { column-rule: dotted; }

/* same as "medium solid blue" */
p.bar { column-rule: solid blue; }

/* same as "8px solid currentColor" */
p.baz { column-rule: solid 8px; }

p.abc { column-rule: thick inset blue; }

例2

HTML内容

<div id="col_rul"> 
  <p> column one </p>
  <p> column two </p>
  <p> column three </p>
</div>

CSS内容

#col_rul { 
  padding: 0.3em;
  background: gold; 
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
}

结果

规范

浏览器兼容性