CSS | 列规则颜色属性

在CSS中，我们可以使用列规则（column-rule）颜色属性来控制多列文本中的分隔线颜色。这个属性可以用于设置分隔线的颜色、宽度、样式等。

语法

column-rule-color: value;

其中，value可以是一个颜色值或者transparent（透明）。

示例

控制所有分隔线颜色

如果我们想要统一控制所有分隔线的颜色，可以使用下面的CSS代码：

.multi-column {
  column-count: 3; /*设置为多列*/
  column-gap: 20px; /*设置列之间的间距*/
  column-rule-color: red; /*设置分隔线颜色*/
  column-rule-style: solid; /*设置分隔线样式*/
  column-rule-width: 2px; /*设置分隔线宽度*/
}

这样设置后，我们会发现所有的分隔线都是红色的。

控制不同列分隔线颜色

如果我们想要控制不同列之间的分隔线颜色，可以使用column-rule-color属性的nth-child伪类选择器。例如，我们可以将第一列的分隔线设置为红色，第二列的分隔线设置为蓝色，第三列的分隔线设置为绿色：

.multi-column {
  column-count: 3; /*设置为多列*/
  column-gap: 20px; /*设置列之间的间距*/
  column-rule-style: solid; /*设置分隔线样式*/
  column-rule-width: 2px; /*设置分隔线宽度*/
}

/*控制第一列分隔线颜色*/
.multi-column:nth-child(1) {
  column-rule-color: red; /*设置分隔线颜色*/
}

/*控制第二列分隔线颜色*/
.multi-column:nth-child(2) {
  column-rule-color: blue; /*设置分隔线颜色*/
}

/*控制第三列分隔线颜色*/
.multi-column:nth-child(3) {
  column-rule-color: green; /*设置分隔线颜色*/
}

这样设置后，我们会发现第一列的分隔线是红色的，第二列的分隔线是蓝色的，第三列的分隔线是绿色的。

注意事项

• column-rule-color属性只有在使用column-count或column-width属性时才会起作用。
• 如果设置的分隔线颜色为透明，那么分隔线将不会显示。