<hr />是语义化分隔符而非画线工具，需重置border并用background或border-top实现可控线条，避免盒模型陷阱，兼顾兼容性与响应式适配。
hr 标签默认行为和常见误解
<hr> 是语义化标签，表示主题/内容的分隔，不是“画线工具”。浏览器默认渲染为浅灰色、带阴影的细横线，但它的样式完全可被 CSS 覆盖——很多人试图用 border 或 height 直接调，结果发现没反应，是因为默认 hr 有 user agent stylesheet 的重置逻辑（比如某些浏览器设了 margin 和 border 并存，height 反而无效）。
关键点：必须显式清除默认边框并用 background 或 border 重绘，否则改 height、color 都可能不生效。
用 background 实现可控的单色细线
这是最稳定、兼容性最好的方式，尤其适合需要精确高度（如 1px）、纯色、无阴影的场景。
- 先重置默认
border：border: none; - 用
height控制线粗细（例如height: 1px;） - 用
background填充颜色：background: #333; - 确保不塌陷：加
margin控制上下间距，比如margin: 24px 0;
hr {
border: none;
height: 1px;
background: #e0e0e0;
margin: 20px 0;
}
用 border 模拟线但要注意盒模型陷阱
用 border-top 也能实现，但容易出错：如果元素本身有 height，又设了 border-top，实际占用高度会变成 height + border-width，导致布局偏移。
立即学习“前端免费学习笔记（深入）”；
- 推荐只设
border-top，不设height，让hr成为“零高度容器” - 用
margin控制视觉位置，而非依赖padding - 避免混用
border和background，否则可能叠加出双线
hr {
border: 0;
border-top: 2px dashed #ff6b6b;
margin: 16px 0;
}
自定义虚线、渐变或图标线的边界条件
虚线、点线、渐变线都可以通过 border-style 或 background-image 实现，但要注意：
-
border-style: dotted在 Safari 里点距不可控，建议用background-image: repeating-linear-gradient(...) - 渐变线需配
height+background-size，否则会平铺成条纹 - 若要插入小图标（如中间加一个 icon），不能靠
hr自身实现，得用伪元素::before/::after或额外包裹元素 - 所有自定义样式在 IE11 及以下不支持
background-image渐变，需提供降级方案
真正难的不是“怎么画”，而是“怎么让它在不同字体大小、缩放比例、暗色模式下都保持预期间距和对齐”——这些细节往往要靠 rem 单位 + em 边距 + appearance: none 组合调试。
