column-rule-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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

尝试一下

语法

css
/* 关键字值 */
column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;

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

/* 全局值 */
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
适用元素multicol elements
是否是继承属性否
计算值绝对长度；如果 column-rule-style 设为 none 或 hidden，则为 0
动画类型a length

形式语法

column-rule-width = 
  <line-width>  

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

示例

设置属性宽度为 4px 的列规则

HTML

html
<p>
  这是分成三列的文本。在 `column-rule-width`
  属性中用于更改列与列之间的线条宽度。修改列之间线条的宽度。你不觉得这很棒吗？
</p>

CSS

css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-width: 4px;
}

结果

规范

Specification
CSS Multi-column Layout Module Level 1
# crw

浏览器兼容性

BCD tables only load in the browser

参见