column-rule 必须与 column-count 或 columns 同时使用才生效，单独声明无效；其 style 为强制项，缺则整条规则失效；线居中绘制于 column-gap 区域，需确保 gap ≥ rule-width + 2px；三列仅显示两道线，因仅存在于列间间隙。

column-rule 本身不生效，是因为你没触发多列布局上下文——它不是独立可用的边框替代品，必须和 column-count 或 columns 同时存在才起作用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么写了 column-rule 却看不到线？

最常见原因是容器没进入多列布局模式。浏览器只在内容被自动折列后才绘制 column-rule，而折列的前提是：

• 没加 display: flex 或 display: grid（这两者会直接禁用多列模块）
• 至少声明了 column-count: 2 或 columns: 2（不能只写 column-rule）
• 容器有足够内容或显式宽度，能撑出真实列数（column-width: 200px 也行，但若父容器太窄，可能只出一列）

比如：div { column-rule: 1px solid #ccc; } 完全无效；必须写成：div { column-count: 3; column-rule: 1px solid #ccc; }

column-rule 的简写顺序和必填项

column-rule 是 column-rule-width、column-rule-style、column-rule-color 的缩写，但解析极严格：

• column-rule-style 是唯一强制项，漏掉就整条规则被丢弃
• column-rule: 1px #999 不生效（缺 style）
• column-rule: solid #999 也不生效（缺 width）
• 正确写法只有两种可靠形式：column-rule: 1px solid #e0e0e0（全写），或 column-rule: solid（只写 style，宽/色走默认）
• 推荐始终写全三值，避免隐式依赖

column-rule 和 column-gap 怎么配合才不压字？

column-rule 的线是居中画在 column-gap 定义的空白区域里的，不是贴着列边缘：

• 如果 column-gap: 2px，而 column-rule-width: 3px，线就会溢出、裁剪甚至盖住文字
• 安全做法：column-gap ≥ column-rule-width + 2px（留视觉余量）
• 例如 column-rule: 1px solid #ddd，column-gap 至少设为 4px
• column-gap 默认是 1em，但字体缩放时会变小，建议显式设置

注意：column-rule 不占布局空间，调大 column-gap 才能“拉开”线的位置，别试图用 margin 或 padding 挤。

为什么最后一列右边没有线？

这是设计行为，不是 bug。三列布局只有两道间隙（第1–2列之间、第2–3列之间），所以最多显示两条 column-rule。它画的是「列与列之间」，不是「每列右边框」。如果你需要右侧边框效果，得额外给容器加 border-right，但那已不属于多列语义——容易在响应式下错位，慎用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！