hr 的 border-color 单独设置常不生效，因默认 border-style 为 inset 且颜色支持差，须同时声明 border-width、border-style、border-color；推荐用 background-color + height 替代，更稳定兼容打印与暗色模式。
hr 的 border-color 为什么经常不生效
直接写 hr { border-color: red; } 大概率没反应，因为 hr 默认边框样式是 inset（3D 凹陷），而 border-color 单独设置时，border-style 和 border-width 仍沿用浏览器默认值——有些浏览器会把 inset 渲染成灰色且忽略颜色；更常见的是，border-width 默认为 medium，但它的实际像素值不可控、跨浏览器不一致。
真正起效的前提是显式声明三要素：border-width、border-style、border-color。推荐用简写：border: 2px solid #ff6b35;
- 别只改
border-color，漏掉border-style就等于没设边框 -
border-style必须是非none值，常用solid、dashed、dotted - 避免用
inset/outset，它们对颜色支持差，且在打印或高对比度模式下可能消失
用 background-color + height 替代 border 更稳
当你要一条纯色实线（尤其要适配打印、暗色模式或 CSS 重置后环境），background-color 方案比 border 更可靠：它不依赖边框渲染逻辑，也不受 box-sizing 或 border-collapse 干扰。
正确写法：hr { height: 2px; background-color: #2563eb; border: none; margin: 1.5rem auto; }
立即学习“前端免费学习笔记（深入）”；
-
height是可见高度，必须配合border: none清除默认边框，否则两者叠加出意外粗细 - 打印时优先选这个方案，
background-color在 @media print 中稳定输出，而虚线/渐变边框常被忽略 - 如果需要居中且限宽，加
width: 80%;和margin: 1.5rem auto;即可
想加渐变或阴影？别碰 border，用 background-image 或 box-shadow
border 不支持渐变色或阴影效果。强行用 border-image 兼容性差（Safari 旧版不支持），且调试复杂。更务实的做法是：
渐变线：hr { height: 3px; border: none; background-image: linear-gradient(90deg, #3b82f6, #8b5cf6); }
阴影线：hr { height: 2px; border: none; background-color: #1e40af; box-shadow: 0 0 4px rgba(30, 64, 175, 0.5); }
-
background-image可替代纯色，兼容性好（IE10+），也支持url()贴图 -
box-shadow比border的outline更可控，不会影响布局流 - 注意：渐变/阴影在打印媒体中基本失效，生产环境需用
@media print降级为纯色
打印时 hr 颜色变淡或消失的根源
不是你代码写错了，而是多数浏览器打印预览默认启用“背景图形”禁用选项（用户可手动打开，但不能强制）。这意味着：background-color 和 background-image 在未开启该选项时不会输出；而 border 的 solid 线条虽能显示，但若颜色太浅（如 #ccc）或宽度太小（1px），打印机可能直接跳过。
- 打印安全色：固定用
#000、#333或#666，避开rgb()/hsl()写法（部分旧打印驱动解析失败） - 打印安全粗细：至少
1.5px，建议2px；height+background-color组合比border更易被识别 - 终极保险：在
@media print里统一重置，例如@media print { hr { height: 2px; background-color: #000; border: none; } }
hr 当成纯装饰元素去调样式，却忘了它本质是语义化分隔符——它的可访问性（如屏幕阅读器如何播报）、打印行为、暗色模式适配，都比“看起来多酷”更关键。 
