多层text-shadow需用逗号分隔，按从左到右顺序绘制，前层在上、后层在下；凸起效果应先写浅色左上阴影再写深色右下阴影，凹陷则相反；层数不宜超6层，模糊值慎超10px以防性能下降。
直接用 text-shadow 就能实现，但关键不是“能不能加”，而是怎么叠、叠几层、颜色和偏移怎么配——错一层，立体感就塌了。
多层阴影叠加必须用逗号分隔，顺序影响视觉层次
浏览器按从左到右顺序绘制每层阴影，前面的会被后面的覆盖。想做出浮雕感，得让浅色（如 white 或 rgba(255,255,255,0.8)）阴影在上层、深色（如 #333 或 rgba(0,0,0,0.4)）在下层。
- 错误写法：
text-shadow: 1px 1px #333, -1px -1px white;→ 白色被黑色盖住，看不见 - 正确写法：
text-shadow: -1px -1px white, 1px 1px #333;→ 白色先画，再压一层暗边，才有凸起感 - 模糊半径为
0的阴影（如-1px 0 0 #000）适合做硬边描边；大于0（如0 2px 4px rgba(0,0,0,0.3)）才产生真实投影感
实现凹陷/凸起效果的关键是阴影方向与颜色组合
凹陷不是“加阴影”，而是模拟光线从斜上方来时，文字左上边缘亮、右下边缘暗。凸起则相反。
- 凸起文字（文字像从背景里“顶出来”）：
text-shadow: -1px -1px 0 white, 1px 1px 0 #333; - 凹陷文字（文字像“陷进背景里”）：
text-shadow: -1px -1px 0 #333, 1px 1px 0 white; - 注意：如果背景不是纯色（比如有渐变或图片），凹陷效果容易失效，因为白色阴影会和背景融合，失去对比
性能和兼容性陷阱：别堆超过 6 层，IE9+ 才原生支持
text-shadow 在现代浏览器中渲染很快，但每多一层，GPU 就要多算一次合成。实测超过 6 层后，在低端 Android 设备上滚动文字会出现卡顿。
- 移动端慎用模糊值 >
10px，尤其配合rgba()透明度时，重绘开销明显上升 - IE9–IE11 需加前缀：
-ms-text-shadow；旧版 Safari（-webkit-text-shadow - 完全不支持的环境（如 IE8 及更早）会静默忽略该属性，不会报错，但也不会 fallback —— 如果设计强依赖阴影，请提前准备
filter: drop-shadow()或图片降级方案
最易被忽略的一点：文字颜色和阴影颜色的明度差必须足够大，否则无论叠几层都看不出立体。建议用工具校验对比度（比如 WCAG AA 要求至少 4.5:1），而不是凭眼睛判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
