大屏装饰线应优先用<hr />而非<div>或<span>，因其天然语义明确、无障碍友好、兼容性好且CSS重置更轻量；需重置border、height、margin三属性，并通过伪元素动画和深色对比度优化确保视觉稳定与可访问性。
大屏装饰线为什么不能用 <div> 或 <span> 模拟
因为语义错位 + 维护成本高。用 <div class="line"></div> 看似自由，但实际会破坏结构可读性，屏幕阅读器无法识别其分隔意图，后续加无障碍支持时还得额外补 role="separator"。而 <hr> 天然带语义、默认可聚焦、兼容性极好（IE8 都认）。更关键的是：CSS 控制 <hr> 的样式比控制空 <div> 更轻量——不用清 margin、padding、display，只要干掉 border 就能重绘。
hr 装饰线必须重置的三个 CSS 属性
不重置就容易在不同浏览器里“忽隐忽现”或“粗细不一”：
-
border: none—— 所有现代浏览器默认给<hr>加border-top，不干掉它，渐变背景会被盖住 -
height—— 必须设具体值（如2px），不能依赖min-height或line-height，否则在 flex/grid 容器中可能塌缩 -
margin—— 默认上下边距不统一（Chrome 是0.39em，Firefox 是0.53em），直接写死margin: 24px auto更可控
动效装饰线怎么避免重绘抖动
常见错误是给 <hr> 加 transform: scaleX(0) 再用 transition 动画展开——但一旦父容器用了 scale() 做整体缩放（大屏常用方案），子元素的 transform 会嵌套叠加，导致动画卡顿或错位。
稳妥做法是用伪元素 + width 动画：
立即学习“前端免费学习笔记（深入）”；
.animated-hr {
border: none;
height: 2px;
background: transparent;
margin: 32px auto;
width: 0;
position: relative;
}
.animated-hr::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
animation: drawLine 1.2s ease-out forwards;
}
@keyframes drawLine {
to { width: 100%; }
}
这样动画只作用在伪元素上，不受父级 scale 干扰，且 GPU 加速更稳定。
深色大屏下装饰线容易被忽略的对比度问题
很多团队在深色背景（如 #0f172a）上直接用浅灰线（#64748b），实测 WCAG AA 对比度只有 3.2:1，远低于 4.5:1 的最低要求。结果是：现场投屏时后排根本看不见这条线。
解决办法不是加粗，而是换思路：
- 用双色渐变线（如
linear-gradient(90deg, #3b82f6, #8b5cf6)），视觉存在感强，且不刺眼 - 加微弱
box-shadow: 0 0 4px rgba(59, 130, 246, 0.3)，增强边缘识别度 - 避免纯白（
#ffffff）——在 OLED 屏上过曝发虚，改用#e2e8f0更稳
真正难的不是画一条线，而是让这条线在 10 米外、不同环境光、各种投影仪下，都“刚好被看见又不抢戏”。这需要实测，不是调个颜色完事。
