本文介绍通过替代 text-decoration: underline 为 border-bottom 的方式，使文本阴影（text-shadow）仅作用于文字本身，而不渲染在下划线之上，从而实现更干净、可控的视觉效果。
本文介绍通过替代 `text-decoration: underline` 为 `border-bottom` 的方式，使文本阴影（`text-shadow`）仅作用于文字本身，而不渲染在下划线之上，从而实现更干净、可控的视觉效果。
在 CSS 中，text-shadow 是作用于整个 text 渲染层的——它不仅影响文字主体，也会“透出”到由 text-decoration: underline 生成的下划线区域，导致下划线边缘出现模糊或偏移的阴影，破坏设计一致性。这是 CSS 规范中固有的渲染行为：text-decoration 属于文本装饰层（text decoration layer），与 text-shadow 共享同一合成层级，无法独立控制阴影归属。
推荐解决方案：用 border-bottom 模拟下划线
border-bottom 是一个独立的盒模型边框，完全脱离文本渲染流，因此不受 text-shadow 影响，可精准控制位置、粗细、颜色和间距：
#link {
color: white;
text-decoration: none; /* 禁用原生下划线 */
border-bottom: 2px solid white; /* 自定义下划线：更清晰、可微调 */
padding-bottom: 2px; /* 可选：增加下划线与文字底边间距，提升可读性 */
}
#link:hover {
color: #ffcc00;
border-bottom-color: #ffcc00; /* 悬停时同步变色，保持视觉统一 */
}
✅ 优势说明
- 完全规避 text-shadow 对装饰线的干扰；
- 支持 border-radius（圆角下划线）、box-shadow（为下划线单独加阴影）、渐变边框等高级样式；
- 更易实现「悬停时下划线从中心展开」「下划线平滑过渡」等动效（配合 transition）；
- 在高对比度模式或可访问性设置下表现更稳定（text-decoration 在部分辅助技术中语义更强，但若视觉优先，border-bottom 是安全替代）。
⚠️ 注意事项
- 若需严格语义化（如 SEO 或屏幕阅读器强调链接状态），建议保留 标签默认行为，并通过 aria-describedby 或视觉隐藏文本补充说明；
- border-bottom 会略微增加元素高度，必要时可通过 line-height 或 vertical-align 微调垂直对齐；
- 不要混用 text-decoration: underline 和 border-bottom，否则可能造成双线重叠。
总结：当设计要求文本阴影与装饰线严格分离时，放弃 text-decoration 而采用 border-bottom 是最直接、兼容性好（支持所有现代浏览器及 IE11+）、且拓展性强的实践方案。
