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>thinmedium、或 thick 关键字之一。

形式定义

初始值medium
适用元素multicol elements
是否是继承属性
计算值绝对长度;如果 column-rule-style 设为 nonehidden,则为 0
动画类型a length

形式语法

column-rule-width = 
<line-width-list> |
<auto-line-width-list>

<line-width-list> =
[ <line-width-or-repeat> ]+

<auto-line-width-list> =
[ <line-width-or-repeat> ]* <auto-repeat-line-width> [ <line-width-or-repeat> ]*

<line-width-or-repeat> =
<line-width> |
<repeat-line-width>

<auto-repeat-line-width> =
repeat( auto , [ <line-width> ]+ )

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

<repeat-line-width> =
repeat( [ <integer [1,∞]> ] , [ <line-width> ]+ )

示例

设置属性宽度为 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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
column-rule-width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见