默认样式不推荐直接使用，因其带阴影、3d边框、不可预测灰暗色及冗余外边距；更关键的是它具强语义（表主题变更），滥用作装饰会破坏可访问性与结构理解。
直接用 <hr> 标签能实现基础视觉分割，但默认样式丑、语义强、不可嵌内容；真要“装饰”，得靠 CSS 重置 + 背景或边框控制，否则容易在高对比度模式、屏幕阅读器中出问题。
为什么 <hr> 默认样式不推荐直接用
浏览器给 <hr> 的默认渲染是带阴影、上下外边距、3D 边框的粗线，颜色灰暗且不可预测。更关键的是：<hr> 是语义化分隔符，代表主题变更（比如从“产品介绍”切到“用户评价”），不是装饰品。强行当装饰线用，会干扰辅助技术对内容结构的理解。
- 常见错误现象：加了
<hr>后线太粗/太亮/有奇怪阴影，改color属性无效（部分浏览器忽略） - 参数差异：HTML5 中
color不是标准属性，应改用background-color+height+border: none - 性能影响：无，但可访问性下降——屏幕阅读器会读作“分隔线”，若只是装饰，属于语义污染
用 CSS 重置 <hr> 实现干净水平线
保留语义，去掉干扰，只留一条可控的线。核心是清空默认边框，用背景色填充固定高度。
- 必须设置
border: none，否则老浏览器（如 IE11）仍渲染原生边框 - 用
height: 1px控制粗细，配合background-color: #ccc填充，比border-bottom更稳定（避免盒模型塌陷） - 外边距统一用
margin: 24px 0，别依赖em，否则在缩放字体时线位置飘移 - 示例：
hr {
border: none;
height: 1px;
background-color: #999;
margin: 24px 0;
}
需要中间带文字？别往 <hr> 里塞
HTML 规范明令禁止在 <hr> 内插入任何内容，包括文字、<span></span> 或伪元素 ::before。强行写 <hr>or 会导致验证失败，部分读屏软件报错或跳过整段。
- 正确做法：用
<div class="text-divider">or</div>+ 伪元素 - 关键点：父容器设
display: flex，两个::before/::after占位并加border-top，文字居中 - 兼容性注意：Flex 布局在 iOS Safari 9+、Chrome 29+ 完全支持，无需额外 polyfill
- 示例结构：
<div class="text-divider">or</div>
.text-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
}
.text-divider::before,
.text-divider::after {
content: "";
flex: 1;
border-top: 1px solid #ccc;
}
.text-divider::before { margin-right: 12px; }
.text-divider::after { margin-left: 12px; }
什么时候该放弃 <hr>，改用 border 或伪元素
当你要的不是“内容主题分隔”，而是“视觉装饰”时，<hr> 就是错的选择。比如卡片底部细线、标题下划线、表单分组线——这些都和语义无关，纯属 UI 细节。
-
border-bottom最轻量：给<section></section>或<div> 加 <code>border-bottom: 1px solid #eee，零语义负担 - 伪元素最灵活：适合旋转线、渐变线、带图标线，且不增加 DOM 节点
- 容易踩的坑：用
border时没清box-sizing，导致高度计算偏差；用伪元素时忘了给父元素加position: relative - 响应式提示：细线在高清屏上可能发虚，建议用
transform: scaleY(0.5)配合transform-origin微调
真正难的不是画出那条线，而是判断它该不该存在、以什么身份存在——语义线不能当装饰用，装饰线也不该抢语义的名号。多数时候，删掉 <hr> 改用 border，反而更干净、更可控、更无障碍。
