hr 是语义化分隔符而非画线工具；必须先设 border: none 才能使 height/background 生效，否则默认 border 会覆盖样式；推荐用 border-top 实现简单线条，height+background 支持渐变等高级效果。
hr 标签不是“画线工具”，而是语义化的内容分隔符；直接用 border 或 background 改样式没问题，但必须先清掉默认边框，否则容易叠出双线或高度失控。
为什么 hr 加了 height 还是没变粗？
因为多数浏览器给 hr 默认设了 border: 1px inset，这个边框会盖住你设的 height 和 background。不显式重置，CSS 就不生效。
- 必须写
border: none或border: 0（两者等效） - 只写
height: 1px不够——如果没清边框，实际渲染仍是那条带立体感的默认线 - 某些旧版 Safari 对
height+background组合支持不稳定，可加display: block强制块级渲染
border-top 和 background 两种方案怎么选？
看你要的是“线”还是“色带”。border-top 更轻量、兼容性极好；background 才能做渐变、虚线纹理、精确 1px 控制。
- 要实线、虚线、点线：优先用
border-top: 2px dashed #999，但注意dotted在 Safari 中点距不可控 - 要渐变、阴影、精确 1px 高度：必须用
height + background，例如height: 1px; background: linear-gradient(to right, #f00, #00f) - 混用会出问题：比如同时设
border-top和background，可能在 Firefox 里看到两条线
响应式场景下 hr 居中和缩放总错位？
错位主因是单位混用和 margin 计算逻辑被忽略。用 rem 或 em 替代固定像素，再配合 max-width 才稳。
- 居中写法必须是
margin: 1.5rem auto，不能只写auto（那样上下 margin 为 0） - 宽度建议用
max-width: 80%而非width: 80%，避免窄屏时内容溢出 - 暗色模式下颜色失效？加媒体查询：
@media (prefers-color-scheme: dark) { .custom-hr { background: #444; } } - 字体缩放后间距崩塌？把 margin 换成
margin: 1.2em 0，它会随font-size等比缩放
能不能让 hr 中间加图标或文字？
原生 hr 不支持子元素，强行插内容会破坏语义且部分屏幕阅读器报错。得用伪元素或包裹容器。
- 安全做法：用
<div class="divider"><span>or</span></div>，再通过::before/::after拉出左右线 - 如果坚持用
hr，只能靠::after绝对定位盖文字，但需额外设position: relative且无法聚焦，对可访问性不友好 - 图标用
background-image可行，但 IE11 不支持background-size: contain，得降级为 SVG 内联或字体图标
真正难的不是调出某一种效果，而是让 hr 在缩放 125%、暗色模式开启、字体被用户强制放大、甚至辅助技术遍历时，依然保持语义正确和视觉稳定——这些没法靠一个 CSS 规则解决，得靠 rem + em + @media + 语义校验组合推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
