hr的唯一合法用途是标记主题、场景或逻辑单元切换，如正文结束→作者注释；它不是画线工具，误用会导致语义混乱、无障碍失效和结构错乱。
hr 是语义分隔符，不是画线工具
直接说结论：hr 的唯一合法用途是标记前后内容发生了主题、场景或逻辑单元的切换——比如正文结束→作者注释、安装步骤→配置说明、白天叙事→深夜闪回。它不是为了“看起来有一条线”而存在。一旦你插入 hr 只是因为设计稿里画了一根线，或者想撑开两段文字间距，就已经误用了。
常见错误现象包括：屏幕阅读器读出“分隔线”后用户完全不知所云；Flex 容器中 hr 被压缩成不可见细线；嵌套在 <p> 里导致 HTML 解析异常，自动闭合前一个段落，结构错乱。
-
hr必须独立于<p>使用，不能作为其子元素 - 不要加
alt、width、align等已废弃属性 - 禁用
aria-hidden="true"——它本就不是装饰元素，隐藏会破坏语义流 - 纯视觉分隔（如卡片之间、菜单项之间）一律用 CSS
border-top或伪元素，不用hr
样式重置必须先清 border，再选渲染路径
hr 是替换元素，浏览器默认靠 border-bottom 渲染那条线，所以直接改 color、height 基本无效。真正生效的只有两条路：用 border-top 或用 background-color + height。
推荐优先用 border-top 方案，兼容性好、控制精确、无盒模型陷阱：
立即学习“前端免费学习笔记（深入）”；
hr {
border: none;
border-top: 2px solid #666;
margin: 1.5em 0;
height: 0;
}
-
border: none必须写，否则某些 UA 会叠加默认边框 -
height: 0比设具体像素值更安全，避免部分浏览器额外渲染空白 - 别碰
width属性——在 Flex/Grid 里行为不稳定，改用max-width: 90%+margin: 1rem auto - 要虚线？把
solid换成dashed或dotted即可
响应式与渐变色分隔线怎么实现
如果需要随屏幕变粗细，或加渐变效果，border-top 就力不从心了，得切到 background 路径：
hr {
border: none;
height: 2px;
background: linear-gradient(90deg, #3498db, #2ecc71);
overflow: hidden;
margin: 1.5em 0;
}
-
overflow: hidden防止渐变溢出造成模糊或锯齿 - 响应式粗细可用媒体查询控制
height，比如@media (max-width: 768px) { hr { height: 1px; } } - 避免在
hr上设padding或box-shadow——它不是容器，加了也没意义 - 若父容器有
padding，hr默认会撑满整个宽度，无需额外处理
真正难的是判断要不要用 hr
所有样式技巧都容易，最难的是每次光标停在两段之间时，问一句：这里内容真的发生主题跃迁了吗？还是只是设计师随手画了根线？
很多团队把 hr 当作“视觉占位符”来用，结果语义结构被悄悄污染，无障碍测试失败，SEO 也悄悄降权——因为搜索引擎越来越依赖语义信号判断内容权重和关系。
记住：hr 不是开关，开了就有线；它是声明，声明“此处逻辑断裂”。用之前，先读一遍前后两段，确认它们是否属于不同话题、不同角色、不同时间线、或不同功能模块。
