column-rule 是 CSS 多列布局中专用于列间分隔线的属性，只在自动折列后的列间隙生效，不占空间、不影响布局流，且必须配合 column-count 或 columns 使用；它与 border 的核心区别在于作用对象和布局影响。
column-rule 是什么，它和 border 有什么区别
column-rule 是 CSS 多列布局（columns 或 column-count）中专用于列与列之间绘制分隔线的属性，不是给每个列容器加 border。它只在列内容自动折列后、相邻列之间生效，不占额外空间，也不影响布局流。
常见错误是用 border-right 给每列子元素加边框——这会导致最后一列也出现多余线条，且响应式缩放时容易错位；而 column-rule 由浏览器自动控制，只画在真正存在的列间隙里。
-
column-rule必须配合column-count或columns使用，单独写无效 - 它不支持
border-image，只能是纯色、虚线、宽度可控的简单线条 - 在 Flex/Grid 布局里完全无效——它只属于多列（
multi-column）模块
column-rule 的三个组成部分怎么配才不出错
column-rule 是简写属性，等价于 column-rule-width + column-rule-style + column-rule-color。顺序不能乱，漏掉任一值会导致整条规则被忽略（尤其 style 为必填项）。
典型写法：column-rule: 1px solid #e0e0e0;。如果只写 column-rule: 1px #e0e0e0;，浏览器会因缺少 style 直接丢弃该声明。
立即学习“前端免费学习笔记（深入）”；
-
column-rule-width支持thin/medium/thick或具体长度（如2px），但不支持百分比或em -
column-rule-style只支持标准边框样式：none、solid、dashed、dotted等，double和groove在部分浏览器中渲染异常 -
column-rule-color默认继承文本色，但若父元素没设颜色，可能意外变成黑色——建议显式指定
column-rule-gap 和 column-rule 冲突吗
不冲突，但容易混淆：column-gap 控制列间距（空白区域大小），column-rule 控制该空白区域中间那条线的样式。两者共存时，column-rule 的线会居中绘制在 column-gap 定义的间隙里。
比如 column-gap: 2rem; + column-rule: 2px solid #999;，最终效果是：两列之间有 2rem 宽的空白，其中央有一条 2px 宽的竖线，两边各留 (2rem − 2px)/2 的空白。
- 如果只设
column-rule不设column-gap，浏览器会使用默认column-gap: 1em，此时线宽超过 1em 就会溢出、覆盖文字 - 在高密度排版（如新闻列表）中，建议先调好
column-gap，再微调column-rule-width，避免视觉拥挤 - Safari 旧版本对
column-gap+column-rule同时使用时偶发重绘异常，可加will-change: transform缓解
移动端适配和 print 媒体里 column-rule 表现如何
在小屏幕（如手机）上，多列布局常被禁用（column-count: 1），此时 column-rule 自动失效——这是预期行为，不是 bug。但要注意：如果你用媒体查询动态切换列数，column-rule 不会触发重绘动画，线条会突然消失/出现。
在 print 媒体中，column-rule 默认不打印（多数浏览器将其视为装饰性内容），如需打印分割线，必须显式在 @media print 中重写，并确保 column-count 仍启用。
- 安卓 WebView（尤其旧版）对
column-rule支持不稳定，建议降级方案：用伪元素::after模拟分隔线 - PDF 导出工具（如 wkhtmltopdf）基本不支持
column-rule，需用border+ 宽度控制模拟 - 如果列内容高度差异大，
column-rule的线长等于最长列的高度——这点常被忽略，导致视觉断层
