column-rule 必须与 column-count 或 columns 同时使用才生效，仅设 column-rule 无效；其样式仅在多列布局中起作用，且 column-rule-style 为强制项，简写缺一不可。
column-rule 必须和 column-count 或 columns 一起用才生效
单独写 column-rule: 1px solid #ccc; 没有任何效果。它不是通用边框，只在多列布局上下文中起作用。如果你已经写了 column-count: 3; 却没看到分隔线，第一反应不是检查 column-rule 写法，而是确认是否漏掉了列数或宽度声明。
常见错误是给容器加了 display: flex; 或 display: grid; —— 这会让 column-rule 完全失效，因为多列模块和 Flex/Grid 是互斥的布局模型。
-
columns: 3 200px;和column-count: 3; column-width: 200px;都能触发column-rule - 如果只设
column-width（不设列数），浏览器会按需生成列，column-rule依然有效 - 容器高度为
auto时，只要内容足够撑出多列，column-rule就会显示
column-rule 简写顺序错一个值，整条规则就丢弃
column-rule 虽然写法像 border，但解析更严格：三个组成部分中，column-rule-style 是唯一强制项。漏掉它，哪怕写了宽和色，浏览器也会直接忽略整条声明。
比如 column-rule: 1px #999; 不生效；column-rule: solid #999; 也不行（缺宽度）；只有 column-rule: 1px solid #999; 或 column-rule: solid;（此时宽和色走默认）才可靠。
- 推荐始终写全三值：
column-rule: 1px solid #e0e0e0; -
column-rule-width不支持%、em，只认px、rem或thin/medium/thick -
column-rule-style: double在 Safari 中可能渲染异常，生产环境慎用
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 挤
为什么最后一列右边没线？这是正常行为
这是最容易引发困惑的一点：column-rule 只画在「真实存在的列与列之间」，不是给每列加右边框。三列布局只有两道间隙，所以最多出现两条线——第1列和第2列之间、第2列和第3列之间。第3列右边永远没线。
有人试图用 border-right 模拟，结果在响应式下缩成两列时，原本第三列的元素带上了多余的边框，破坏对齐。这种方案本质是错的。
- 用
column-rule就接受它的语义：它描述的是「列间关系」，不是「列自身装饰」 - 如果 UI 确实要求每列右侧都有线（比如卡片列表），说明这不是多列布局场景，该换 Flex/Grid +
border-right - 需要标题跨列时，
column-span: all;会自动跳过column-rule区域，无需额外处理
实际调试时，最常卡住的地方是：忘了设 column-count 或 columns、简写漏了 style、column-gap 小于 column-rule-width。这三点覆盖了 90% 的“为什么没线”问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
