text-shadow 是解决可读性与视觉层级的轻量工具：用于复杂背景提亮文字、模拟立体/浮雕、可控发光及透明文字轮廓，但需规避模糊过大、混用偏移等错误，且正文小字慎用。
text-shadow 不是装饰噱头，而是解决真实可读性与视觉层级问题的轻量级工具。它在现代 CSS 中几乎零性能开销、无需额外 DOM 元素，但用错参数或场景反而会降低信息传达效率。
让文字在复杂背景上“浮出来”
这是 text-shadow 最刚需的用途：浅色文字配图片/渐变背景时，单靠 color 很难保证对比度达标（尤其 WCAG 4.5:1 要求）。此时加一层深色、小偏移、无模糊的阴影，比改文字颜色或加半透明遮罩更精准。
- 推荐写法：
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);—— 垂直向下压 1px，轻微模糊，不破坏字形锐度 - 避坑点：避免用
blur-radius > 3px处理可读性问题，虚化会削弱边缘识别度，尤其对小字号或视障用户不利 - 替代方案思考：若背景动态变化（如视频封面），纯
text-shadow不够鲁棒，应配合background-clip: text+-webkit-text-fill-color: transparent做背景融合
模拟立体/浮雕效果（非纯装饰）
所谓“立体字”，本质是用多层微偏移阴影模拟光源方向。关键不是层数多，而是偏移方向一致、颜色梯度合理——否则会显得脏、糊、失重。
- 基础凸起感（模拟顶部光源）：
text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;—— 白色上阴影 + 深色下阴影，blur-radius必须为0，否则失去硬边质感 - 进阶 3D 深度（如按钮悬停反馈）：
text-shadow: 1px 1px 0 #aaa, 2px 2px 0 #999, 3px 3px 0 #888;—— 每层偏移递增，颜色逐层变深，模拟纵深感 - 常见错误：混用正负偏移（如
-1px 1px和1px -1px同时存在）会让阴影发散，文字像被“撕开”，丧失聚焦感
发光/霓虹效果的可控实现
发光不是越亮越好，而是要匹配设计语境。真正可用的发光效果，核心是控制好模糊半径与颜色饱和度的平衡，避免光晕吞噬文字主体。
- 安全发光（适合标题/品牌词）：
text-shadow: 0 0 8px rgba(255, 220, 0, 0.7), 0 0 16px rgba(255, 220, 0, 0.4);—— 两层同色不同模糊，外层更透，内层更实 - 高对比警示（如错误提示）：
text-shadow: 0 0 4px #ff3333, 0 0 8px #ff3333;—— 红色+中等模糊，比纯红色文字更抓眼球且不刺眼 - 兼容性提醒：IE ≤ 8 完全不支持
text-shadow，若项目仍需兼容，只能降级为filter: glow(color=#xxx)（仅 IE），但该滤镜不可控、易发虚，不建议主动适配
用透明文字 + 阴影做特殊排版
当需要文字呈现“镂空”“光效轮廓”或“玻璃拟态”时，color: transparent 配合 text-shadow 是最轻量解法，比 SVG 文字或 Canvas 绘制更易维护。
立即学习“前端免费学习笔记（深入）”；
- 经典霓虹轮廓：
color: transparent; text-shadow: 0 0 10px #00f, 0 0 20px #00f; - 金属拉丝感（需搭配字体粗细）：
color: transparent; text-shadow: 0 0 3px #ccc, 0 0 6px #999; - 致命风险：一旦父容器设置了
opacity或启用了will-change，color: transparent的文字可能在部分 Chrome 版本中意外显示为黑块（已知渲染 bug），务必在目标浏览器中实测
text-shadow，而是判断什么时候不该用它——比如正文段落、小字号菜单、高频交互文案。这些地方加阴影，大概率是在掩盖排版结构缺陷，而非增强体验。 
