text-shadow多层叠加需每层完整包含水平偏移、垂直偏移、模糊半径和颜色，缺一不可；常见错误是漏写模糊值或逗号分隔不当；实现景深感需按近中远三层匹配偏移与模糊节奏；移动端需注意ios safari降级渲染及dpr适配，推荐用rem单位保障响应式精度。
text-shadow 支持多层叠加，但每层必须完整包含水平偏移、垂直偏移、模糊半径和颜色四部分，缺一不可——漏掉 blur（哪怕写 0）就会整条声明静默失效。
为什么写了两层却只看到一层？
常见错误是省略模糊值或用错逗号分隔位置：
-
text-shadow: 1px 1px #000, 2px 2px #333→ ❌ 缺blur，浏览器直接忽略整条 -
text-shadow: 1px 1px 0 #000 2px 2px 0 #333→ ❌ 少了逗号，变成非法语法 -
text-shadow: 1px 1px 0 #000, 2px 2px 0 #333→ ✅ 正确：每层三参数齐全，逗号分隔
旧版 Safari 连 0 都不认，稳妥起见建议写 0.1px。
怎么让多重阴影看起来有景深感？
关键不是堆层数，而是控制偏移与模糊的节奏匹配：
- 内层（近距）：小偏移 + 小模糊，比如
1px 1px 0.1px #000 - 中层（中距）：偏移略增 + 模糊略升，比如
2px 2px 1px #333 - 外层（远距）：偏移再增 + 模糊明显加大，比如
4px 4px 4px rgba(0,0,0,0.2)
避免线性递增（如 1px/2px/3px），改用 #{$i * 1.3px} 类比例增长更自然；模糊半径别超偏移量的 3 倍，否则阴影断裂、悬浮感过强。
移动端真机上阴影变淡或消失？
这不是代码问题，是 iOS Safari 和部分 Android WebView 主动降级渲染：
- 检测到
blur > 8px或层数 > 4 时，可能截断 alpha 值甚至丢弃某层 -
rgba(0,0,0,0.05)这类极低透明度在旧 WebView 里会被四舍五入为 0 - 圆角元素叠加多层阴影时，
border-radius别用小数（如5.5px），iOS 易断裂
上线前务必在真机 Safari / Chrome 中实测，别信 DevTools 模拟器。
真正难的不是写出五层 text-shadow，而是让它们在不同 DPR、滚动状态和系统功耗模式下始终对齐不糊边——所有偏移和模糊单位若用 px，缩放时会失准；用 rem 才能随 clamp() 字号真正响应式缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
