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: dotted;

column-rule: solid 6px;

column-rule: solid blue;

column-rule: thick inset blue;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  columns: 3;
  column-rule: solid;
  text-align: left;
}

该简写属性使用简单方便的声明形式将各个 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>       |
  <gap-auto-rule-list>  

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

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

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

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

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

<gap-repeat-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

浏览器兼容性

参见