column-rule 必须与 column-count 或 columns 同时使用才生效，单独声明无效；其 style 为强制项，缺则整条规则失效；线居中绘制于 column-gap 区域，需确保 gap ≥ rule-width + 2px；三列仅显示两道线，因仅存在于列间间隙。
column-rule 本身不生效，是因为你没触发多列布局上下文——它不是独立可用的边框替代品，必须和 column-count 或 columns 同时存在才起作用。
为什么写了 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，但那已不属于多列语义——容易在响应式下错位，慎用。
