必须先写 border: none 才能使 height 和 background-color 生效，因浏览器 UA 样式 border: 1px inset 会强制覆盖；二者机制不同，混用导致双线等问题；响应式与兼容性需结合 rem、@media、box-sizing 等综合处理。
为什么直接写 height 或 background-color 没效果
不是你 CSS 写错了，是浏览器默认给 hr 加了 border: 1px inset（或类似值），这个 UA 样式会强行覆盖你写的 height 和 background。它不走层叠逻辑，而是“压住”你的样式——相当于你画了一条线，系统又在上面盖了一层默认边框。
必须先清掉它：border: none（或 border: 0）得写在最前面，且不能只写 border-top: none 或 border-style: none，那没用。
-
height: 1px单独写 = 白写 -
background-color: #666单独写 = 大概率看不见 - 旧版 Safari 对
height + background-color组合支持差，建议加display: block
border-top 和 height + background 怎么选
二者底层机制不同，混用会出双线（尤其 Firefox）、打印失效、暗色模式错乱。选哪个取决于你要什么：
用 border-top 的场景：实线、虚线、点线、双线、3D 效果（ridge/groove），兼容性好，老浏览器也稳。
立即学习“前端免费学习笔记（深入）”；
- 虚线分隔：
border-top: 2px dashed #999（dotted在 Safari 点距不可控） - 双线：
border-top: 3px double #ccc - 别配
height：Firefox 会坚持画两条线 - 打印时部分驱动忽略
border-top颜色，只印默认灰线
用 height + background 的场景：渐变、精确 1px 控制、暗色模式适配、阴影、打印可靠输出。
- 渐变：
height: 0.125rem; background: linear-gradient(to right, #ff6b6b, #4ecdc4) - Retina 屏防模糊：用
rem单位，比如height: 0.0625rem（=1px @16px base） - 别同时写
border-top和background，Firefox 真的会画两条
响应式与兼容性容易踩的坑
hr 是替换元素，padding 对它无效，所有间距只能靠 margin；它也不吃 text-align，居中必须用 width + margin: auto。
- 宽度别写
width: 80%：窄屏易溢出，改用max-width: 600px; margin: 1.5rem auto - 如果全局用了
box-sizing: border-box，记得给hr显式加box-sizing: content-box，否则margin可能塌陷 - 缩放 125% 或开启系统字体放大时，
px单位的border-top容易断续，优先用rem - 暗色模式下，
currentColor或color值继承可能失效，建议用明确色值或@media (prefers-color-scheme: dark)单独控制
真正难的不是调出某一种效果
是让 hr 在用户开启暗色模式、强制放大字体、屏幕阅读器遍历、高对比度模式、甚至打印机输出时，依然语义正确、视觉稳定、不崩布局。
单靠一个 border-top 或一个 background 规则解决不了这些——得组合 rem 单位、@media 查询、prefers-reduced-motion 校验、以及必要时用 JS 检测环境并 fallback。
