本文介绍通过替代 text-decoration 的方式（如使用 border-bottom）来实现带阴影的文字效果，同时确保阴影不干扰下划线，提升视觉层次与可读性。
本文介绍通过替代 `text-decoration` 的方式（如使用 `border-bottom`）来实现带阴影的文字效果，同时确保阴影不干扰下划线，提升视觉层次与可读性。
在 CSS 中，text-shadow 会作用于整个文本渲染层，包括由 text-decoration: underline 生成的下划线——这意味着下划线本身也会被阴影“包裹”，导致模糊、偏移或视觉污染，尤其在深色背景或高对比度设计中尤为明显。
根本原因在于：text-decoration 是文本固有渲染属性，其绘制层级与 text-shadow 处于同一合成阶段，无法独立控制阴影作用范围。CSS 规范中暂无原生属性（如 text-shadow-exclude-decoration）可排除装饰线，因此需采用语义等效但渲染可控的替代方案。
✅ 推荐方案：用 border-bottom 模拟下划线
该方法将下划线转为独立的盒模型边框，完全脱离文本渲染流，从而天然规避 text-shadow 影响：
#link {
color: white;
text-shadow: black 3px 3px; /* 阴影仅作用于文字本身 */
text-decoration: none; /* 禁用原生下划线 */
border-bottom: 1px solid white; /* 独立、精准可控的下划线 */
padding-bottom: 2px; /* 可选：微调下划线与文字间距 */
}
#link:hover {
color: #ffcc00; /* 可同步优化悬停颜色 */
border-bottom-color: #ffcc00; /* 下划线颜色同步变化 */
/* 无需设 border: 0；只需改色或透明即可平滑过渡 */
}⚠️ 注意事项：
- border-bottom 默认紧贴 line-height 底部，若需精确对齐传统下划线位置，建议配合 padding-bottom 或 margin-bottom 微调；
- 避免在行内元素上滥用 border-bottom 造成布局塌陷（本例中 <a> 默认为行内元素，安全）；
- 若需支持多行文本下划线（如 <span> 包裹换行内容），border-bottom 仍能保持连贯，而 text-decoration 在换行时可能中断；
- 响应式场景中，可结合 clamp() 或媒体查询动态调整 border-bottom-width 和 text-shadow 偏移量，确保小屏清晰可辨。
? 进阶提示：对于需要更复杂装饰（如波浪线、双线、虚线下划线），可进一步使用 background-image: linear-gradient() 或伪元素 ::after 定位实现，同样不受 text-shadow 干扰。
总结：当设计要求文字阴影与装饰线严格分层时，放弃 text-decoration 而采用基于盒模型的替代方案，是目前最可靠、兼容性好（支持所有现代浏览器及 IE11+）、且易于维护的实践路径。
