text-shadow多层偏移可实现纯CSS 3D文字，关键在于严格语法、三层递进式光源衰减（高光→主影→深影）、blur-radius为0的锐利错位及主文字描边防露底。
直接用 text-shadow 多层偏移就能做出可用的 3D 立体文字，不需要 JS 或 3D 变换 —— 但必须写对顺序、控制好模糊和颜色透明度，否则只是糊成一团或完全不生效。
为什么你的 text-shadow 没显示？
浏览器对 text-shadow 语法极其严格，错一个位置就整条静默丢弃，不报错也不渲染：
-
text-shadow: #000 2px 2px;❌ 颜色提前 → 整条无效 -
text-shadow: 2px 2px 0;❌ 缺颜色 → 等价于没写 -
text-shadow: 2px #000 2px;❌ 顺序错乱 → 忽略 - 正确写法必须是：
text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666;✅
三层叠加才够“立体”，不是越多越好
单层是投影，两层像贴纸，三层起才有纵深感。关键不是堆数量，而是模拟光源衰减：
- 高光层：
0 -1px 1px rgba(255,255,255,0.7)（顶部浅色，小模糊） - 主影层：
1px 1px 2px rgba(0,0,0,0.3)（中灰，适中模糊） - 深影层：
2px 2px 4px rgba(0,0,0,0.2)（深灰，略大模糊） - alpha 值必须递减（0.7 → 0.3 → 0.2），否则叠加过曝、层次消失
- 中文小字号下慎用超过 3 层，笔画密集区易糊成色块
错位堆叠要锐利，blur-radius 必须为 0
想实现“文字一层层错开”的视觉分层（比如红→绿→蓝错位），核心是硬边 + 方向一致：
立即学习“前端免费学习笔记（深入）”；
- 所有层
blur-radius写成0或显式省略（默认为 0） - 偏移量建议以
3px为步长递增：3px 3px #f00, 6px 6px #0f0, 9px 9px #00f - Safari（尤其 iOS 14 前）对
0模糊有跳过风险，稳妥起见可写0.1px - 避免父容器设
overflow: hidden，否则边缘阴影被裁掉 - 高 DPR 屏（如 Retina）下，固定
px偏移会显得过厚，优先考虑em或vw
别碰伪元素做分层，text-shadow 一条声明搞定
有人想用 ::before/::after 分别控制红蓝层，实际踩坑率极高：
- 伪元素继承
font-size和line-height，一旦父容器有transform或flex对齐，各层基线立刻错乱 -
content: attr(data-text)在 Safari 16.6 有渲染延迟，动画不同步 - 真正稳的方案：全用逗号分隔的单条
text-shadow声明 —— 渲染路径最短、无重排、语义干净 - 如果非要用伪元素（比如需要独立
animation-delay），必须显式重置：font-size: 1em; line-height: 1; vertical-align: baseline;
最常被忽略的一点：主文字层务必加 text-shadow: 0 0 1px #000 做极细描边，否则多层错位后边缘露底，文字在浅色背景上直接“消失”。
