column-rule 是 CSS 中用于设置多列布局中列与列之间的分隔线的属性。该属性允许你指定列与列之间的宽度、样式和颜色。

column-rule 属性的语法如下：
column-rule: column-rule-width column-rule-style column-rule-color;

其中，三个值分别表示：

  •  column-rule-width：用于设置列与列之间分隔线的宽度。

  •  column-rule-style：用于设置列与列之间分隔线的样式（如实线、虚线等）。

  •  column-rule-color：用于设置列与列之间分隔线的颜色。


以下是一个简单的例子：
.example {
  column-count: 3; /* 将元素分割成三列 */
  column-rule: 2px solid #ccc; /* 列与列之间的分隔线为2像素宽的实线，颜色为灰色 */
}

在这个例子中，.example 类的元素被设置为分割成三列，并使用 column-rule 属性设置列与列之间的分隔线为2像素宽的实线，颜色为灰色。

如果你想更具体地设置每个分隔线的宽度、样式和颜色，你可以单独使用 column-rule-width、column-rule-style、column-rule-color 这三个属性。
.example {
  column-count: 3; /* 将元素分割成三列 */
  column-rule-width: 2px; /* 列与列之间分隔线的宽度为2像素 */
  column-rule-style: dashed; /* 列与列之间分隔线的样式为虚线 */
  column-rule-color: #3498db; /* 列与列之间分隔线的颜色为蓝色 */
}

需要注意的是，column-rule 属性只在有多列的情况下才会产生效果。如果只有一列，这个属性不会有任何作用。在实际应用中，如果需要更复杂的多列布局，可能需要结合使用其他与多列相关的属性，例如 column-count、column-width 等。在现代网页设计中，Flexbox 和 Grid 布局通常提供更强大且灵活的布局选项。


转载请注明出处：http://www.zyzy.cn/article/detail/6050/CSS