hr 必须先写 border: none 再设 border-top，否则默认 ua 边框与自定义边框叠加导致双线；适合实线/虚线/双线等语义化分隔，不适用于渐变、阴影或精确 1px 控制。
hr 标签加 border-top 确实能快速出线，但直接写 border-top: 1px solid #999 很大概率会多画一条线——不是你漏写了什么，是浏览器默认的 border 没清干净。
必须先写 border: none，否则 border-top 会叠在默认边框上
所有主流浏览器（Chrome、Firefox、Safari、Edge）都给 hr 设了类似 border: 1px inset 的 UA 样式。这个默认边框不会被 border-top 覆盖，而是和它共存。结果就是：你以为只有一条线，实际是两条——一条默认的浅灰内凹线 + 你写的实线，尤其在深色背景或高对比度模式下特别明显。
正确写法只有这一种顺序：
hr {
border: none;
border-top: 2px dashed #666;
margin: 1.5rem 0;
}
-
border: none必须写在最前面，不能只写border-top: none或border-style: none - 别用
height配border-top，Firefox 会坚持画两条 - 如果用了
box-sizing: border-box的全局重置，记得给hr显式加box-sizing: content-box，否则margin可能塌陷
border-top 适合什么场景？不适合什么？
它本质是“描边”，不是“填充”，所以适合需要明确线型语义的场合：实线、虚线、点线、双线，且对老浏览器（IE11、旧版 Safari）兼容性极好。
- 要虚线分隔：用
border-top: 2px dashed #ccc，比background方案更稳；但注意dotted在 Safari 中点距不可控，Windows 高对比度模式下可能完全消失 - 要双线效果：直接
border-top: 3px double #999，无需伪元素或渐变模拟 - 不要用它做渐变、阴影、精确 1px 控制——
border-top不支持linear-gradient，也不能设box-shadow（会被截断） - 打印时，部分打印机驱动会忽略
border-top的颜色/样式，只印默认灰线；若需可靠打印输出，改用height + background
移动端缩放和 Retina 屏下的常见错位
写死 border-top: 1px solid #999 在 iPhone 或 Windows 缩放 125% 时，视觉上容易变模糊、断续甚至消失——因为物理像素不足，浏览器做了亚像素渲染妥协。
- 避免用
px单位控制粗细，改用rem：border-top: 0.0625rem solid #999（即 1px @16px base），缩放时更稳定 - 宽度别靠
width: 80%居中，窄屏易溢出；换成max-width: 600px; margin: 1.5rem auto -
padding对hr无效（它是替换元素），所有间距必须靠margin控制；上下留空建议用rem，比如margin: 1.25rem 0
真正难的不是让 hr 在 Chrome 里看起来像设计稿，而是它在用户开启暗色模式、系统字体放大、屏幕阅读器聚焦、甚至打印预览时，依然保持语义清晰、视觉可控——这些没法靠一行 border-top 解决，得靠 rem + 媒体查询 + 语义校验组合推进。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
