结论：必须先写 border: none，否则 height、background 等样式几乎无效；因浏览器默认设 border: 1px inset，会覆盖其他样式。
直接说结论：别只写 border-color 或 height，必须先加 border: none，否则你改的几乎全白费。
为什么 hr 写了 height: 1px 还是没变细？
因为浏览器默认给 hr 设了 border: 1px inset（或类似值），这个边框会强行接管渲染逻辑——height 和 background 都被压在它底下，根本没机会生效。
- 不是你的 CSS 错了，是浏览器“偷偷盖章”了
- 只写
border-top: 1px solid #999不够，得先清掉所有边框：border: none（不能只写border-top: none） - 旧版 Safari 对
height + background-color组合支持不稳定，建议补一句display: block
border-top 和 background 到底该选哪个？
取决于你要的是“线”还是“色带”。两者底层机制不同，混用大概率出双线。
- 要实线、虚线、点线：
border-top: 2px dashed #999更轻量，兼容性好；但注意dotted在 Safari 里点距不可控，Windows 高对比度模式下还可能消失 - 要渐变、精确 1px 高度、暗色模式适配、打印输出：
height: 1px; background: linear-gradient(...)是唯一稳的方案 - 别同时写
border-top和background，Firefox 真的会画两条线
响应式缩放和 Retina 屏下怎么不糊、不错位？
固定像素值（比如 height: 2px）在高 DPI 屏上会被缩成 0.5px，视觉断续；在用户放大字体或缩放 125% 时也容易偏移。
立即学习“前端免费学习笔记（深入）”；
- 用 rem 单位替代 px：
height: 0.125rem（即 2px @16px base），更稳 - 宽度别用
width: 80%，窄屏易溢出；改用max-width: 600px+margin: 1.5rem auto -
padding对hr无效（它是替换元素），所有间距必须靠margin控制 - 如果父容器用了
box-sizing: border-box，给hr显式加box-sizing: content-box防止布局偏移
真正难的不是调出某一种效果，而是让 hr 在缩放 125%、暗色模式开启、用户强制放大字体、甚至屏幕阅读器遍历时，依然保持语义正确和视觉稳定——这些没法靠一个 CSS 规则解决，得靠 rem + @media + 语义校验组合推进。
