hr 标签默认行为和常见误解
首先得明确一点：border 或 height 来改变它，却发现改了没效果，或者效果很奇怪。
这是因为，浏览器对 margin 和特定的 border 样式，导致你单纯调整 height 可能完全无效。这里有个关键结论：要想彻底掌控 border，然后使用 background 或 border 属性来重新绘制线条。如果不做这一步，很多后续样式修改都可能不生效。
用 background 实现可控的单色细线
当你需要一条高度精确（比如经典的1像素线）、颜色纯正、没有任何阴影干扰的横线时，使用 background 属性是兼容性最稳定、效果最可控的方案。
- 第一步，重置掉所有默认边框：
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-top的宽度。这可能会引发意料之外的布局偏移，导致对齐出问题。
立即学习“前端免费学习笔记（深入）”；
- 一个可靠的实践是，仅使用
border-top（或border-bottom），而不设置height，让 - 线条的视觉位置，通过
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使用，否则渐变背景会默认平铺，变成条纹背景。 - 如果想在横线中间插入一个小图标，这超出了
::before或::after，或者在外面包裹一个额外的容器来实现。 - 所有依赖
background-image渐变的自定义样式，在 IE11 及以下版本的浏览器中是不支持的，必须提前准备好降级方案（比如回退到纯色线）。
说到底，自定义样式的难点往往不在于“怎么画出来”，而在于“如何确保它在不同字体大小、页面缩放比例、甚至深色模式下，都能保持设计师预期的间距和对齐效果”。要达到这种级别的稳定性，通常需要结合使用 rem 单位、基于 em 的边距，有时甚至加上 appearance: none 来彻底抹平浏览器差异，再经过细致的调试才能完成。
