text-shadow语法为水平偏移、垂直偏移、模糊半径、颜色，顺序不可错；常用于复杂背景提可读性；失效多因overflow裁剪、颜色相近或逗号遗漏；推荐双层阴影组合提升质感。
text-shadow 的基本语法和参数顺序
text-shadow 接受四个值：水平偏移、垂直偏移、模糊半径、颜色。顺序不能错，否则整个声明会被浏览器忽略。
- 水平偏移为正数时，阴影往右；负数则往左
- 垂直偏移为正数时，阴影往下；负数则往上
- 模糊半径为 0 时不模糊；越大越柔和，但性能开销略增（尤其在大量文字或动画中）
- 颜色支持
rgba()，透明度控制很关键——比如rgba(0,0,0,0.3)比纯黑更自然，避免“压字”感
示例：text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
用 text-shadow 提升可读性的实际场景
不是所有文字都需要阴影，重点是「背景复杂或对比不足」时补救：
- 图片背景上的标题文字（比如 banner 图叠加文字）
- 渐变背景或深色图片上放浅色文字
- 半透明容器内文字（如
background: rgba(255,255,255,0.8)）导致文字发灰 - 系统默认字体渲染较细（如 macOS 的 San Francisco 在非 retina 屏上）
此时单靠加粗或改色可能不够，一层轻微阴影比强行调高 contrast 更可控。
常见失效原因和调试建议
text-shadow 看不见？先检查这几个点：
- 父元素设置了
overflow: hidden，且阴影超出范围被裁剪（尤其配合transform或clip-path） - 文字颜色和阴影颜色太接近（比如白字配
rgb(240,240,240)） - 使用了
text-rendering: optimizeLegibility，某些浏览器会弱化阴影渲染 - 在 IE 中未加前缀（IE10+ 原生支持，IE9 及以下不支持，需降级处理）
- 多层阴影写错逗号，比如漏掉分隔符：
text-shadow: 1px 1px 1px #000 2px 2px 2px #333;→ 实际只生效第一组
多层阴影的实用组合技巧
单层阴影容易显得单薄或生硬，两层更稳妥：
- 第一层：小偏移 + 无模糊（
0 0 0 #000），压实轮廓 - 第二层：稍大偏移 + 轻微模糊（
1px 1px 1px rgba(0,0,0,0.2)），增加立体感
也可以反向使用浅色阴影提亮深色文字：text-shadow: -1px -1px 1px rgba(255,255,255,0.3), 1px 1px 1px rgba(0,0,0,0.2);
注意：超过三层阴影对可维护性和渲染性能都是负担，多数设计场景两层足够。真正难搞的是斜体+小字号+低DPI屏下的阴影锯齿，这时候得配合 font-smooth 或直接换字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
