<hr /> 是语义化分隔符而非画线工具，须用 CSS 控制样式；HTML 属性如 color、height 已废弃，需重置 border 后用 background 或 border-top 重建线条；暗色模式与缩放下应使用 rem/em 和媒体查询；无语义分隔时应改用 <div class="divider">。
hr 标签不是“画线工具”，而是语义化的内容分隔符；直接写 <hr> 就能插入，但样式必须用 CSS 控制，否则容易改不动、布局错位或在暗色模式下失效。
为什么hr加了color或height没反应
因为 color、width、size 等 HTML 属性在 HTML5 中已被废弃，现代浏览器会忽略它们。更隐蔽的问题是：不同浏览器对 hr 的 user agent stylesheet 处理不一致——比如 Chrome 默认设了 border: none + border-bottom: 1px inset，而 Firefox 可能保留 border 并忽略 height。
必须显式重置默认边框：
- 先写
border: none或border: 0（二者等效） - 再用
border-top或background重建线条 - 避免同时设
height和border-top，否则盒模型会多出像素
border-top vs background：选哪个更稳
background 方案兼容性最好，适合 1px 实线、纯色、响应式缩放场景；border-top 更适合虚线、双线等 border-style 支持的样式，但要注意 Safari 对 dotted 的点距渲染不一致。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
- 实线/细线：用
background，例如height: 1px; background: #e0e0e0; - 虚线/双线：用
border-top，例如border-top: 2px dashed #666;，且不设height - 渐变线：只能靠
background: linear-gradient(...)，需配height和background-size
怎么让hr在暗色模式和缩放下不跑偏
问题不在“画不画得出来”，而在“画得准不准”——字体缩放、系统暗色模式、rem/em 单位切换都会影响 hr 的垂直对齐和间距表现。
关键控制点：
- 上下间距统一用
margin（如margin: 1.5rem 0），不用padding - 高度用
em或rem（如height: 0.0625rem）比固定px更适应缩放 - 暗色模式下颜色要声明
@media (prefers-color-scheme: dark)降级值 - 禁用
appearance: none在旧版 Safari 可能导致阴影残留，需加前缀
什么时候不该用hr，该用div加 class
当水平线只是装饰性留白、没有内容逻辑分隔意义时，hr 就是误用——它会向屏幕阅读器宣告“主题变更”，破坏语义流。
典型该换的情况：
- 卡片底部仅作视觉收尾的细线
- 表单字段之间为对齐加的“辅助线”
- 动画中需要 JS 控制显隐的分割线
- 需要伪元素插入图标（如中间加一个
●）的场景
此时用 <div class="divider"></div> 更干净，也绕开了 hr 的语义包袱和默认样式干扰。
