text-shadow的立体感依赖光源方向一致性而非参数堆叠，需用多层不同偏移、颜色、透明度的阴影模拟深度，避免同向叠加或过多层数。
text-shadow 能加深度，但不是靠“堆叠层数”或“加大模糊值”就能自动出立体感——它本质是二维偏移+模糊，所谓“深度”得靠人眼对多层阴影方向、颜色、透明度的综合判断。
text-shadow 参数顺序和负值偏移的实际意义
语法是 text-shadow: h-offset v-offset blur-radius color，前两个参数必须存在，且支持负值。很多人只用正数，结果阴影全往右下跑，看起来像被压扁的投影。
- 想模拟光源在左上方？用
text-shadow: -2px -2px 1px rgba(0,0,0,0.3) - 想让文字“浮起来”？加一层浅色上偏移阴影：
text-shadow: 0 -1px 1px rgba(255,255,255,0.7), 1px 1px 2px rgba(0,0,0,0.2) -
blur-radius不能为负；设为0时阴影边缘锐利，适合描边或硬投影
用多层 text-shadow 模拟“深度感”的常见错误
直接复制粘贴多个相同参数的阴影（比如 text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000）只会让阴影变重、变糊，不会产生纵深——因为所有阴影都在同一平面偏移方向上叠加。
- 真正有用的组合：一层深色下偏移（主投影）+ 一层浅色上偏移（高光暗示）
- 避免超过 3 层阴影，否则渲染开销上升，且在低性能设备上易出现锯齿或闪烁
- RGBA 颜色比纯色更可控，
rgba(0,0,0,0.15)比#333更适合做底层过渡阴影
兼容性和伪元素上的 text-shadow 行为
IE9+、Edge 12+、Chrome 4+、Firefox 3.5+、Safari 5.1+ 都支持 text-shadow，但 IE8 及以下完全忽略该声明，且不触发回退逻辑——它就当没写。
- 可在
::first-letter和::first-line上使用，但 Safari 旧版本对::first-line的text-shadow支持不稳定 - 不要指望用
text-shadow替代box-shadow做容器级投影——文字阴影不会随父容器 transform 缩放而等比缩放，容易失真 - 动画
text-shadow属性本身可行，但频繁变化blur-radius在移动端可能掉帧，建议用transform+ 单层阴影模拟浮动效果
最常被忽略的一点：文字阴影的“深度”不是数值越大越真实，而是取决于你是否控制住了光源方向的一致性。同一页面里，标题、按钮、提示文字如果用了不同方向的阴影，用户会感觉界面在“晃”，而不是有深度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
