column-rule 列间分隔线属性

最后更新：2026-09-13

column-rule column-rule 列间分隔线属性

column-rule 是 column-rule-width、column-rule-style、column-rule-color 的简写属性，用于在多列布局的列与列之间绘制一条分隔线。它类似 border，但仅显示在列间距中，用来增强多栏文本的栏位区分。

分类
初始值	medium none currentcolor
继承	否
适用于
可动画
CSS 版本	CSS3
状态	标准

📝 语法

column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;

⚙️ 取值

值	类型	描述
`<column-rule-width> \|\| <column-rule-style> \|\| <column-rule-color>`	值	列间分隔线简写

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
column-rule	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： column-rule 的语法和 border 类似，三个值的顺序任意，但必须指定 style 才会显示线条。

注意： column-rule 仅在多列布局中显示，若只有一列则不会看到分隔线。分隔线的宽度不会占用列宽，而是绘制在列间距中间。

❓ 常见问题

Qcolumn-rule 和 border 有什么区别？

Aborder 绘制在元素边框四周，围绕整个盒子；column-rule 只绘制在多列布局的列间距中间，用于分隔相邻两列，列的最外侧不会显示。另外 column-rule 不占用额外空间（绘制在 gap 区域内），宽度不会挤压列宽。它的样式写法和 border 类似（width、style、color 三个子属性）。

Q如何让分隔线显示为虚线？

A设置 column-rule-style 为 dashed 或 dotted，如 column-rule: 2px dashed #999。style 可取 border 支持的所有线型：solid、dashed、dotted、double 等。注意必须指定 style（默认 none），否则不显示线条。

Qcolumn-rule 的三个子属性怎么设置？

Acolumn-rule 简写三个子属性：width（宽度，如 1px）、style（线型，如 solid/dashed，必填才显示）、color（颜色，默认 currentcolor）。三个值顺序任意，如 column-rule: #ccc 1px solid 也合法。

Q为什么 column-rule 分隔线没有显示？

A常见原因：1）没设置 column-rule-style，style 默认 none 不显示线条；2）容器没产生多列（列数为 1 时没有列间距，看不到分隔线），需确认内容足够、column-count/column-width 已生效；3）分隔线绘制在列间距中，column-gap:0 也看不见。按这三项排查即可。