text-shadow多层叠加是目前最可靠、兼容性最好、无需JavaScript的3D文字实现方式，但属视觉错位模拟而非真3D；单层无法产生厚度，需三层递增偏移（如1px1px/2px2px/3px3px）且blur-radius为0，并按凸起或凹陷调整颜色深浅。
text-shadow 多层叠加是目前最可靠、兼容性最好、无需 JavaScript 的 3D 文字实现方式——但它不是“真 3D”，而是靠视觉错位模拟纵深感；写错参数顺序或漏值，整条声明会静默失效，页面上什么都不会出现。
为什么单层 text-shadow 做不出 3D 效果
单层阴影只能平移或模糊，无法制造“厚度”或“前后层次”。人眼识别 3D 感依赖同一方向上连续递增的偏移（如 1px 1px、2px 2px、3px 3px），且必须关闭模糊（blur-radius 设为 0）才能保持边缘锐利，否则层层叠叠会糊成一团。
- 写成
text-shadow: 1px 1px #000, 2px 2px #000;是对的（blur-radius省略即为0） - 写成
text-shadow: 1px 1px 2px #000, 2px 2px #000;就错了——第二层没写模糊值，但颜色后突然接了数字，浏览器会把#000当成颜色、2px当成模糊半径，导致解析失败 - 所有层都必须显式写出前两个偏移值，
-1px -1px和+1px +1px在旧版 Safari 可能解析异常，统一用1px 1px更稳
text-shadow 三层递增偏移的典型写法
真正可用的 3D 感不需要堆到 5–6 层，3 层足够：小偏移打底、中偏移承重、大偏移定型。关键是每层颜色要随深度变暗/变浅，不能全用纯黑或纯白。
- 凸起文字（白字深底）：
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #999, 3px 3px 0 #666; - 凹陷文字（黑字浅底）：
text-shadow: -1px -1px 0 #fff, -2px -2px 0 #eee, -3px -3px 0 #ddd; - 注意：中文笔画密集时，偏移步长建议 ≥2px；小字号（
移动端和高 DPR 屏的常见坑
iOS Safari 对多层 text-shadow 渲染压力敏感，尤其在滚动或动画中——超过 4 层容易掉帧；同时 macOS 和 iOS 默认启用子像素抗锯齿，会吃掉 1px 级别的细节偏移。
- 解决方法：加
-webkit-font-smoothing: antialiased;强制关闭子像素渲染，让偏移更清晰 - 高 DPR 屏（如 Retina）下，
1px偏移实际可能被渲染为 0.5px，视觉弱于预期；可改用2px起步，或配合@media (-webkit-min-device-pixel-ratio: 2)单独加大偏移量 - 父容器若设了
overflow: hidden，多层偏移后的阴影会被裁切——3D 效果直接消失，务必检查外层 wrapper
别用 box-shadow 替代 text-shadow
box-shadow 作用于元素盒模型，不是文字本身；给 <h1> 加 box-shadow，只会给整个标题块套一层外框阴影，文字内部依然扁平，且无法控制阴影与字形的贴合度。
立即学习“前端免费学习笔记（深入）”；
- 验证方法：给文字加
background: red;，再加box-shadow——你会看到红色块有阴影，但红块里的字还是没影 - 唯一例外是极特殊需求（比如斜向投影），才考虑用
::before伪元素 +transform模拟，但它额外创建渲染层，性能代价远高于原生text-shadow - 记住：
text-shadow是文字专属属性，box-shadow是容器专属属性，二者不互通、不替代
