column-rule-color

Baseline 已广泛支持

此特性已得到良好确立,可跨多种设备和浏览器版本使用。自 2017 年 3 月起,所有浏览器均支持此特性。

column-rule-color CSS 属性设置多列布局中列之间绘制的线条的颜色。

试一试

column-rule-color: red;
column-rule-color: rgb(48 125 222);
column-rule-color: hsl(120 80% 40% / 0.6);
column-rule-color: currentColor;
<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;
}

语法

css
/* <color> values */
column-rule-color: red;
column-rule-color: rgb(192 56 78);
column-rule-color: transparent;
column-rule-color: hsl(0 100% 50% / 60%);

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

column-rule-color 属性指定为一个单独的 <color> 值。

<color>

分隔列的线条的颜色。

正式定义

初始值currentcolor
应用于多列元素
继承性
计算值computed color
动画类型一种颜色

正式语法

column-rule-color = 
<line-color-list> |
<auto-line-color-list>

<line-color-list> =
[ <line-color-or-repeat> ]+

<auto-line-color-list> =
[ <line-color-or-repeat> ]* <auto-repeat-line-color> [ <line-color-or-repeat> ]*

<line-color-or-repeat> =
<color> |
<repeat-line-color>

<auto-repeat-line-color> =
repeat( auto , [ <color> ]+ )

<repeat-line-color> =
repeat( [ <integer [1,∞]> ] , [ <color> ]+ )

示例

设置蓝色列分隔线

HTML

html
<p>
  This is a bunch of text split into three columns. The `column-rule-color`
  property is used to change the color of the line that is drawn between
  columns. Don't you think that's wonderful?
</p>

CSS

css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}

结果

规范

规范
CSS Multi-column Layout Module Level 1
# crc

浏览器兼容性

另见