column-rule仅在多列布局中生效，需配合column-count/column-width/columns使用；语法必须包含style（如solid），且与column-gap协同控制线的位置和间距。
column-rule 不是通用分隔线工具，它只在多列布局（column-count 或 columns）生效，单独写毫无作用。
为什么写了 column-rule 却看不到线
最常见原因是没启用多列模式。浏览器只认 column-count、column-width 或简写的 columns，三者至少得有一个；否则 column-rule 直接被忽略。
- 检查是否漏了
column-count: 2;这类声明，仅靠column-rule: 1px solid #ccc;不会触发列布局 - 若用了
display: flex或display: grid，column-rule完全无效——它和 Flex/Grid 是两套互不兼容的布局机制 - 某些旧版 Safari 在
column-gap和column-rule同时存在时可能重绘异常，可临时加will-change: transform;缓解
column-rule 简写必须带 style
语法顺序固定：column-rule: <width><style> <color></style></width>，其中 style（如 solid）不可省略。漏掉它，整条规则作废。
- ✅ 正确：
column-rule: 2px solid #999; - ❌ 错误：
column-rule: 2px #999;（缺style，浏览器直接丢弃） -
width支持thin/medium/thick或具体值（如1.5px），但不支持em、% -
color默认继承文本色，若父元素未设color，可能意外变成黑色——建议显式写上
column-rule 和 column-gap 怎么配合
两者共存时，column-rule 的线会严格居中绘制在 column-gap 定义的空白区域里。
- 例如：
column-gap: 2rem;+column-rule: 2px solid #666;→ 两列间有 2rem 空白，中央一条 2px 线，线两边各留约(2rem − 2px)/2的空隙 - 如果只设
column-rule没设column-gap，浏览器用默认column-gap: 1em；此时若column-rule-width>1em（比如设成2em），线会溢出、压住文字 - 高密度排版（如新闻摘要列表）中，先调好
column-gap再微调column-rule-width，避免视觉拥挤
移动端和 print 媒体里的表现差异
column-rule 在多数现代移动端浏览器中渲染正常，但 iOS Safari 15 及更早版本对 column-gap + column-rule 组合偶发错位，尤其在横屏切换后。
- print 媒体中，部分打印机驱动会忽略
column-rule-color，强制转为黑线；若需可靠输出，建议用column-rule-color: #000;显式指定 - 它不支持
border-image，所有样式只能是纯色 + 标准边框样式（solid/dashed/dotted），double、groove在部分 Android WebView 中渲染异常 - 别指望它响应
prefers-color-scheme——目前无浏览器实现该组合逻辑
真正容易被忽略的是：这条线的位置完全由 column-gap 控制，而不是你“画”出来的；一旦 column-gap 计算结果小于 column-rule-width，就会出现重叠或裁剪，且没有任何警告提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
