CSS3 column-rule-width 属性

column-rule-width 属性用于设置多列布局中的列之间的边框宽度。该属性可以接受长度值、百分比值或预定义的关键字作为参数。

语法

column-rule-width: medium|thin|thick|<length>|<percentage>|initial|inherit;

• medium：默认值，表示中等宽度的边框。
• thin：表示细边框。
• thick：表示粗边框。
• <length>：指定具体的边框宽度，如 px、em 等。
• <percentage>：相对于列宽的百分比值。

示例

// www.javascriptcn.com code example
/* 设置列边框宽度为细边框 */
.column {
  column-count: 3;
  column-rule: thin solid #333;
  column-rule-width: thin;
}

/* 设置列边框宽度为指定长度值 */
.column {
  column-count: 2;
  column-rule: thick dashed #ff0000;
  column-rule-width: 3px;
}

/* 设置列边框宽度为百分比值 */
.column {
  column-count: 4;
  column-rule: medium double #00ff00;
  column-rule-width: 10%;
}

在多列布局中，通过调整 column-rule-width 属性，可以改变列之间的边框宽度，从而美化页面布局。