hr默认样式跨浏览器不一致：IE使用color设置颜色，Firefox与Safari需background-color，Opera还需height；必须同时设置border:none、height:1px、color与background-color相同值才能统一渲染。
说到前端中的 color 设置颜色，Firefox 和 Safari 则只认 background-color，而 Opera 还需要加上 height 才能正确显示。如果不提前处理好这些差异，上线后很可能收到用户反馈“在我电脑上显示正常”之类的兼容性问题。
要确保跨浏览器显示一致，其实并不复杂，关键在于同时设置以下三个属性：
border: none—— 清除所有默认边框，避免不同浏览器对border-top的解析差异。height: 1px—— 显式指定高度，这对 Opera 和旧版 Safari 尤其重要。color: #666; background-color: #666—— 前景色与背景色使用相同值，既兼容IE的旧方式，也适配现代浏览器。
使用 border-top 替代 background 实现细线控制
假设你想绘制一条2像素高、蓝色的实线，有人可能会直接使用 background-color 配合 height。但坦率地说，这不是最佳方案，因为这样画出的线边缘容易模糊，抗锯齿效果不可控。推荐使用 border-top 这一更可靠的方案：
hr {
border: none;
border-top: 2px solid #4a90e2;
height: 0;
margin: 24px 0;
}
这段代码有几个关键要点值得注意：
- 将
height设为0，是为了防止某些浏览器（如Safari）将border-top视为内容的一部分而撑开高度。 border-top的值直接决定线的视觉粗细，清晰明确。- 如果需要虚线或点线，只需将
solid替换为dashed或dotted，兼容性比依赖box-shadow的方案更稳定。
渐变及复杂样式需使用 background-image 实现
当设计稿要求不再是简单的纯色或边框，而是渐变、条纹等效果时，background-image: linear-gradient(...) 是少数可靠的选择。但需注意，此时 background-color 会被覆盖，并且必须配合 height 才能显示渐变区域：
hr {
border: none;
height: 4px;
background-image: linear-gradient(
to right,
#ff6b6b,
#4ecdc4,
#44b5b1
);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 28px auto;
width: 80%;
}
在实际操作中，有几个常见陷阱需要注意：
- 遗漏
background-repeat: no-repeat，会导致渐变被重复平铺成条纹状。 height设置过小（如1px），渐变色带会被压缩，几乎无法辨识。- 未设置
width和margin: auto，在Flex或Grid布局容器中，线条可能被异常拉伸或偏移。
响应式居中与容器适配需依赖 width 与 margin
text-align: center 无法实现，必须使用盒模型来控制：
width: 60%—— 宽度相对于父容器进行计算。margin: 20px auto—— 上下保留20px外边距，左右自动居中。- 如果父容器采用Flex布局，建议添加
align-self: center，防止被flex对齐属性影响。
移动端适配是一个挑战，在小屏幕下 width: 60% 可能显得过窄。一个实用的组合是 max-width: 400px 配合 width: 90%，既保持比例，又设置了绝对宽度上限。
但无论如何美化，有一个基本原则不能忽视——div 加CSS模拟，记得手动添加 role="separator" 和 aria-hidden="false"，这才是负责任的实现方式。
