hr 是最语义明确的水平分隔符，但因 CSS 重置常导致 border 消失；应统一在基础样式中设 border-top，禁用 height+background 模拟；带文字分隔须用 div+伪元素，hr 不允许嵌入内容。
hr 标签仍是最语义明确、开箱即用的水平分隔方案，但直接写 <hr> 很可能被默认样式或重置 CSS 干扰，实际效果常和预期不一致。
为什么 hr 渲染出来不是一条线？
现代 CSS 重置库（如 Normalize.css 或 Tailwind 的 base styles）普遍会重设 hr 的默认边框和 margin。例如 Chrome 默认是 border: 1px inset，但某些框架会清成 border: none，导致“消失”。
- 检查 DevTools 中
hr元素的 computedborder-top是否为none或0px - 确认父容器是否设置了
overflow: hidden或transform，可能裁剪掉细线 - 若页面用了 CSS-in-JS 或 Shadow DOM，
hr可能未继承全局样式
如何用 CSS 安全控制 hr 样式？
HTML5 已移除所有呈现属性（width、color、noshade 等），必须用 CSS。关键不是“怎么写”，而是“写在哪”——建议在全局基础样式中统一定义，避免局部覆盖冲突。
- 必须显式设置
border：仅靠height或background不可靠，hr是替换元素，高度由边框撑开 - 推荐写法：
hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1.5rem 0; } - 避免用
height+background模拟，会导致可访问性问题（屏幕阅读器可能忽略无语义的 div） - 若需响应式粗细，用
border-width: max(1px, 0.05em)，兼顾高 DPI 和缩放
hr 和 div + border-top 选哪个？
取决于语义需求：如果只是视觉分隔且上下文无主题切换，div class="divider" 更灵活；如果明确表示“段落间主题转换”（比如从介绍切换到操作指南），hr 不可替代。
-
hr被屏幕阅读器识别为“section break”，朗读时会提示“horizontal rule” -
div方案需手动加role="separator"和aria-hidden="true"才能接近语义等效 - 性能上无差异，但混用易造成维护混乱——团队内应约定：语义分隔用
hr，装饰分隔用div
带文字的分隔线能否用 hr 实现？
不能。HTML 规范禁止在 hr 内嵌内容（它是空元素），强行插入文字会导致验证失败，且部分旧版辅助技术会报错。
- 正确做法：用
div+ 伪元素，如.text-divider::before和::after绘制两侧线条 - 若必须保语义，可包裹结构：
<div role="separator" aria-label="or"><span>or</span></div>，再用 CSS 布局 - 注意：不要给
hr加content伪元素，它不渲染文本节点，纯属无效 hack
真正容易被忽略的是语义与样式的耦合点：当你删掉一段内容时，hr 是否还合理存在？如果分隔线只服务于视觉节奏而非内容逻辑，它其实不该是 hr。
