column-rule-width

**column-rule-width** CSS 属性设置在多列布局中列之间绘制的线条的宽度。

试一试

语法

css

/* Keyword values */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

/* <length> values */
column-rule-width: 1px;
column-rule-width: 2.5em;

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

column-rule-width 属性指定为单个 <'border-width'> 值。

值

<'border-width'>: 是 border-width 定义的关键字，用于描述规则的宽度。它可以是 <length> 或 thin、medium 或 thick 关键字之一。

正式定义

初始值	`medium`
应用于	多列元素
继承	否
计算值	绝对长度；如果 `column-rule-style` 为 `none` 或 `hidden`，则为 `0`
动画类型	一个长度

正式语法

column-rule-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick

示例

设置粗列规则

HTML

html

<p>
  This is a bunch of text split into three columns. The `column-rule-width`
  property is used to change the width 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-width: thick;
}

结果

规范

规范
CSS 多列布局模块级别 1 # crw

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。