text-shadow实现立体感需多层叠加并控制偏移、模糊与颜色渐变：近层小偏移低模糊（如1px 1px 0.2px #000），远层逐步增大，避免全向右下堆叠致边缘模糊；兼容性上所有模糊值至少写0.1px；性能敏感场景建议≤2层；伪元素方案易错位且语义差，text-shadow更优。
text-shadow怎么叠出立体感
单个 text-shadow 只能投一个影子，真要“3D”，得靠多个值连写——不是加多几层就自动变立体，关键在偏移方向和模糊半径的配合。
常见错误是堆 5 个 text-shadow 全往右下偏移，结果只是阴影变厚、边缘糊成一团，没有纵深感。
- 从近到远叠：第一个阴影偏移小（比如
1px 1px）、模糊低（0.2px），模拟近处锐利投影 - 往后每层增大
dx和dy，同时略增模糊（但别超1px，否则失焦） - 颜色建议用同一色系渐变暗（如
#000→#333→#666），避免跳色破坏层次
示例（伪浮雕效果）：text-shadow: 1px 1px 0.2px #000, 2px 2px 0.4px #333, 3px 3px 0.6px #666;
IE 和 Safari 对多层 text-shadow 的兼容差异
IE10+ 支持多值 text-shadow，但 Safari（尤其 iOS 14 前）对模糊半径 0 的处理不一致：设成 0 时可能直接忽略整条声明，而非渲染无模糊影子。
- 安全做法：所有模糊值至少写
0.1px，哪怕视觉上没差别 - 不要依赖
text-shadow做核心可读性保障——它本质是装饰，降级后文字必须本身可读 - 若需支持旧 Safari，可用
-webkit-text-stroke配合浅色描边模拟“内凹”错觉，但这是权宜之计
性能敏感场景下 text-shadow 层数怎么取舍
每多一层 text-shadow，浏览器就要额外做一次合成计算。滚动区域里大量使用（比如列表项文字带 4 层阴影），在低端 Android 或旧 iPad 上容易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 动效中慎用：CSS 动画里改
text-shadow值会触发重绘（repaint），比改transform开销大得多 - 静态标题可叠 3–4 层，正文或高频更新元素建议 ≤2 层
- 用
will-change: text-shadow不仅无效，还可能拖慢——这个属性对text-shadow无优化作用
为什么用 text-shadow 而不用伪元素模拟
有人用 ::before + 绝对定位盖一层深色块来“造假”3D，看似灵活，实则埋坑更多。
- 换行时伪元素无法自动跟随，文字折行后阴影错位
- 字体变化（比如用户缩放、系统字体替换）会让伪元素偏移失效
- 屏幕阅读器可能把伪元素内容误读——而
text-shadow完全不影响语义 - 维护成本高：每改一次文字颜色，就得同步调两处样式
真正需要精细控制（比如斜角高光）才考虑伪元素；日常“立体字”直接用 text-shadow 多层叠，干净、可控、语义正确。
最易被忽略的一点：text-shadow 的偏移是相对于文字基线（baseline）计算的，不是包围盒左上角——所以不同字体、不同 line-height 下，同样数值的阴影位置实际会漂移。调试时别只盯着一个字体看。
