直接用可行但需重置样式，因其默认细灰线、带阴影、上下留白大，与现代设计冲突；必须设border: none、height和background-color才能可控生效，且仅适用于语义化主题切换场景。
直接用 <hr> 就行，但浏览器默认样式太丑
现代浏览器对 <hr> 的默认渲染（细灰线、带阴影、上下留白大）经常和设计稿冲突。它不是“不能用”，而是必须重置样式才能可控。不加 CSS 时，<hr> 在 Chrome/Firefox/Edge 中表现基本一致，但 Safari 旧版本可能多出内边距。
- 别用
<hr>做语义化分隔以外的用途（比如当装饰线或进度条），语义错位会影响可访问性 - 若内容分区有明确逻辑层级（如章节切换），优先考虑用
<section>+ 标题，<hr>只作视觉补充 - 避免嵌套：不要把
<hr>放进<header>或<footer>内部再单独设 margin，容易触发怪异盒模型
hr 的常见样式重写方式
最稳妥的是用 border 替代默认 hr 渲染，禁用所有默认边框/背景/尺寸：
hr {
border: none;
height: 1px;
background-color: #e0e0e0;
margin: 24px 0;
}
- 必须设
height，否则background-color不生效（<hr>是替换元素，宽高行为特殊） - 慎用
border-bottom类方案：某些屏幕缩放下会模糊成 2px，而background-color + height更稳定 - 如果要渐变线，用
background: linear-gradient(...)，但 IE11 不支持，需降级为纯色
响应式场景下 hr 容易被忽略的细节
移动端常需要更细的分割线或不同间距，但很多人只在媒体查询里改 margin，忘了 height 和 background-color 也需要适配：
- 小屏设备上，
height: 1px在 DPR=2 的手机上实际是 2 物理像素，可能显得粗；可用height: 0.5px（Chrome/Firefox 支持，Safari 部分版本会四舍五入到 1px） - 深色模式下，硬编码
#e0e0e0会变成难看的灰紫，建议用color-scheme: light dark配合CSS 变量或@media (prefers-color-scheme: dark) - 如果父容器用了
transform: scale(0.75)（比如报表缩放），<hr>的height也会被缩放，此时应改用border并配合transform: scaleY(1)强制还原
替代方案：什么时候不该用 <hr>
当分割线需要承载交互（点击展开、拖拽调整区域高度）、或必须和相邻内容严格对齐（比如和卡片圆角切边对齐），<hr> 就力不从心了：
- 用空
<div>+ class 模拟，方便绑定事件和动态控制显示/隐藏 - Flex/Grid 布局中，用
gap属性替代<hr>更简洁（例如flex-direction: column; gap: 24px;） - 如果只是分隔两个区块的背景色差异，有时加个
padding-bottom+border-bottom在上一区块末尾，比插<hr>更少 DOM 节点
真正麻烦的不是怎么画一条线，而是想清楚这条线到底在表达什么——是文档结构分界？视觉节奏停顿？还是纯粹为了填满空白？选错载体，后面所有样式调试都是徒劳。
