CSS3 column-rule 属性

column-rule 属性用于设置多列布局中列之间的分隔线样式。

语法

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;

• column-rule-width：指定分隔线的宽度，可以使用像素、百分比、em 等单位来设置。
• column-rule-style：指定分隔线的样式，可以是 solid（实线）、dashed（虚线）、dotted（点线）等。
• column-rule-color：指定分隔线的颜色，可以使用颜色名称、十六进制值或者 RGB 值来设置。

示例

/* 设置分隔线为红色实线，宽度为2px */
.column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 2px solid red;
}

在上面的示例中，我们为 .column 元素设置了 3 列布局，列之间的间隔为 20px，分隔线为红色实线，宽度为2px。

注意事项

• 如果想要只设置分隔线的某个属性，可以使用 column-rule-width、column-rule-style 和 column-rule-color 分别设置。
• column-rule 属性可以简写为 column-rule: width style color;，如果某个属性不需要设置，可以使用 initial 或 inherit 关键词代替。