text-shadow多层叠加才是立体感的关键：单层仅能实现浮雕或发光，真3d需3层以上模拟光源与景深，按“高光→主影→深影”顺序书写，推荐rgba控制自然衰减，避免超4层以防移动端性能抖动。
text-shadow 多层叠加才是立体感的关键
单层 text-shadow 只能出浮雕或发光，真立体必须叠 3 层以上——不是为了炫技，而是模拟真实光源方向与景深。浏览器渲染时每一层阴影是独立绘制的，顺序靠前的层在视觉上更“近”，所以通常按「高光 → 主影 → 深影」从上到下写。
常见错误是把所有偏移值设成相同方向（比如全用 2px 2px），结果文字像被压扁的纸片。真正有体积感的做法是：
-
0 -1px 1px：顶部高光（浅色，模糊小） -
1px 1px 2px：主投影（中灰，模糊适中） -
2px 2px 4px：底层深影（深灰/黑，模糊略大）
示例：
text-shadow: 0 -1px 1px #fff, 1px 1px 2px rgba(0,0,0,0.3), 2px 2px 4px rgba(0,0,0,0.2);
rgba 透明度比纯色更自然，但别滥用 opacity
用 rgba(0,0,0,0.3) 而非 #666 是因为真实阴影边缘是渐变衰减的，纯色会显得生硬。但注意：这里控制的是阴影自身的不透明度，和元素 opacity 无关——后者会连文字一起变淡，破坏对比度。
容易踩的坑：
- 深色背景上用
rgba(0,0,0,0.8)→ 阴影过重，文字“陷”进去 - 浅色背景配
rgba(255,255,255,0.9)→ 高光太抢眼，像反光贴纸 - 三层都用同一 alpha 值 → 缺乏远近层次，建议按 0.1 → 0.3 → 0.2 递减
字体粗细和 line-height 会影响阴影最终观感
细字体（如 font-weight: 300）加厚阴影容易糊成一团；超粗字体（700+）则需加大偏移量，否则阴影紧贴字形，看不出立体分离。实测下来，font-weight: 500–600 最兼容。
另外：line-height 过小会让多行文字的阴影互相干扰，尤其第二层主影容易和下一行文字重叠。建议至少设为 1.4 以上，给阴影留出呼吸空间。
移动端 Safari 对多层 text-shadow 渲染有性能抖动
iOS 15–16 的 WebKit 在渲染超过 4 层 text-shadow 时可能出现掉帧，尤其配合 transform: scale() 或滚动时。不是 bug，是渲染管线对多阴影的优化不足。
解决办法很直接：
- 优先砍到 3 层（高光 + 主影 + 深影），够用
- 避免在
@keyframes动画里动态改text-shadow值 - 若必须复杂效果，用伪元素
::before模拟一层投影，减轻主线程压力
最常被忽略的一点：立体感不等于层数多，而在于每层的 offset、blur、color 三者是否形成可信的光路逻辑——调完记得关灯看一眼屏幕，阴影方向是不是统一朝右下？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
