column-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

CSS column-rule 简写属性可以在多列布局中设定分割线的宽度、样式和颜色。

尝试一下

该简写属性使用简单方便的声明形式将各个 column-rule-* 属性放在了一起：column-rule-width、column-rule-style 和 column-rule-color。

备注： 和所有简写属性一样，任何没有指定的单独值会设置为相应初始值（可能会覆盖非简写属性设置的值）。

语法

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

/* 全局值 */
column-rule: inherit;
column-rule: initial;
column-rule: revert;
column-rule: revert-layer;
column-rule: unset;

取值

column-rule 属性可以按任何顺序指定为下面列出的一个、两个或三个值。

<'column-rule-width'>

定义为 <length> 或是 thin、medium、thick 关键字的其中一个。请参阅 border-width。

<'column-rule-style'>

请参阅 border-style 以获取可能的值和详细信息。

<'column-rule-color'>

一个 <color> 值。

形式定义

初始值该简写所对应的每个属性：
适用元素multicol elements
是否是继承属性否
计算值该简写所对应的每个属性：
动画类型该简写所对应的每个属性：

形式语法

column-rule = 
  <gap-rule-list>       |
  <auto-gap-rule-list>  

<gap-rule-list> = 
  <gap-rule-or-repeat> [ / <gap-rule-or-repeat> ]*  

<auto-gap-rule-list> = 
  [ [ <gap-rule-or-repeat> ] / ]* <auto-repeat-gap-rule> [ / [ <gap-rule-or-repeat> ] ]*  

<gap-rule-or-repeat> = 
  <gap-rule>         |
  <repeat-gap-rule>  

<auto-repeat-gap-rule> = 
  repeat( auto , [ <gap-rule> ]# )  

<gap-rule> = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<repeat-gap-rule> = 
  repeat( [ <integer [1,∞]> ] , [ <gap-rule> ]# )  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

示例

示例一

css
/* 与 "medium dotted currentcolor" 相同 */
p.foo {
  column-rule: dotted;
}
/* 与 "medium solid blue" 相同 */
p.bar {
  column-rule: solid blue;
}
/* 与 "8px solid currentcolor" 相同 */
p.baz {
  column-rule: solid 8px;
}
p.abc {
  column-rule: thick inset blue;
}

示例二

HTML

html
<p class="content-box">
  This is a bunch of text split into three columns. Take note of how the
  `column-rule` property is used to adjust the style, width, and color of the
  rule that appears between the columns.
</p>

CSS

css
.content-box {
  padding: 0.3em;
  background: #ff7;
  column-count: 3;
  column-rule: inset 2px #33f;
}

结果

规范

Specification
CSS Multi-column Layout Module Level 1
# column-rule

浏览器兼容性

BCD tables only load in the browser

参见