column-rule-width

基线广泛可用

自 2017年3月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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

本文内容

尝试一下

column-rule-width: thin;

column-rule-width: medium;

column-rule-width: thick;

column-rule-width: 12px;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  columns: 3;
  column-rule: solid;
  text-align: left;
}

语法

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-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,∞]> |
hairline |
thin |
medium |
thick

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

<integer> =
<number-token>
此语法反映了基于 CSS Borders and Box Decorations Module Level 4, CSS Gap Decorations Module Level 1, CSS Values and Units Module Level 4 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

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

HTML

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

CSS

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

结果

规范

CSS Multi-column Layout Module Level 1
# crw

浏览器兼容性

启用 JavaScript 以查看此浏览器兼容性表。

参见

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年11月3日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题