hr 默认边框 border: 1px inset 会覆盖 height 和 background 设置，必须先写 border: none；推荐用 height: 0.125rem + background 或 border-top 实现稳定分割线。
直接写 hr { height: 1px; background: #ccc; } 大概率没反应——因为浏览器默认边框没清掉，样式被覆盖了。
为什么 hr 改 height 或 background-color 没效果？
几乎所有现代浏览器对 hr 都预设了 border: 1px inset（或类似值），这个默认边框会压住你写的 height 和 background。不是你的 CSS 写错了，是它根本没机会生效。
- 必须先写
border: none（或border: 0），彻底清除默认边框 - 只写
height: 1px不够，不配border: none就等于白写 - 旧版 Safari 对
height + background-color组合支持不稳定，建议加display: block强制块级渲染
用 border-top 还是 background 画线？
取决于你要的是“线”还是“色带”。两者底层逻辑不同，混用容易出双线。
- 要实线、虚线、点线：
border-top: 2px dashed #999更轻量，兼容性好；但注意dotted仅在 Chrome/Firefox 中点距可控，Safari 里不可靠 - 要渐变、精确 1px 高度、暗色模式适配、打印输出：
height: 1px; background: linear-gradient(...)是唯一稳的方案 - 别同时写
border-top和background，Firefox 可能真给你画两条线
响应式居中和缩放总错位？单位和 margin 是关键
错位往往不是样式写得不对，而是单位混用 + margin 计算被忽略。
- 宽度别用
width: 80%，窄屏易溢出；改用max-width: 600px+margin: 1.5rem auto - 高度别写死
height: 2px，Retina 屏上会模糊；用height: 0.125rem（即 2px @16px base）更稳 -
padding对hr无效（它是替换元素），所有间距必须靠margin控制 - 如果父容器用了
box-sizing: border-box，给hr显式加box-sizing: content-box防止布局偏移
真正难的不是调出某一种效果，而是让 hr 在缩放 125%、暗色模式开启、用户强制放大字体、甚至屏幕阅读器遍历时，依然保持语义正确和视觉稳定——这些没法靠一个 CSS 规则解决，得靠 rem + @media + 语义校验组合推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
