多层box-shadow必须单条声明、逗号分隔，按“近层→远层”顺序书写（最左在最上层），最多3层；写错顺序或超层数会导致真机糊边、掉帧或阴影消失。
直接说结论：多层阴影不是“堆层数”，而是靠顺序、参数配比和设备适配三者咬合才能出质感；写错顺序或盲目加到4层以上，真机上大概率糊边、掉帧、甚至某层直接消失。
box-shadow 多层声明为什么总被覆盖？
因为重复写 box-shadow 属性会覆盖前值，不是叠加。浏览器只认最后一个声明。
- ❌ 错误写法：
box-shadow: 0 2px 4px rgba(0,0,0,0.1);然后又写box-shadow: 0 8px 16px rgba(0,0,0,0.05); - ✅ 正确写法：所有层写在同一行，用逗号分隔：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05); - 渲染顺序是关键：最左边的阴影画在最上层，最右边的在最底层——这和图层直觉相反，但恰恰模拟真实光照
近层/远层参数怎么配才不糊不飘？
单靠调透明度或只拉大 blur 都不行。真正塑造“浮起感”的是 blur 和 spread 的配合，以及偏移与透明度的梯度衰减。
- 近层建议：
0 2px 6px 2px rgba(0,0,0,0.15)（小偏移 + 正spread显厚实，blur控制在 4–8px） - 远层建议：
0 12px 24px 0 rgba(0,0,0,0.06)（大偏移 + 高blur+ 极低透明度，spread设为 0 保扩散） - 避免
blur: 0：高 DPR 屏上边缘锯齿明显，改用blur: 1px更稳 - 慎用负
spread：如-2px可压边，但 ≤ -4px 容易像素断裂
inset 阴影怎么浮到表面当高光？
inset 默认绘制在所有外阴影之下，所以写在后面≠浮在上面——它天生在底层。想让它当高光，必须手动提层。
- ❌ 错误顺序：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);→ 高光被盖住 - ✅ 正确顺序：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.8);这句本身没错，但要让它显出来，得把inset放最前面：box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.1); -
inset不支持spread，若需体积感，可叠两层inset（如一层inset 0 1px 0+ 一层inset 0 2px 2px） - 搭配
border: 1px solid transparent，能让inset更贴合边缘不溢出
移动端真机上阴影突然变淡或消失怎么办？
这不是 CSS 写错了，是 iOS Safari 或旧 Android WebView 主动降级渲染——检测到 blur > 10px 或层数 > 3 时，会悄悄截断 alpha 值或丢弃某层。
- 上线前务必在真机 Safari/Chrome 中测试，别信 DevTools 模拟器
- 避免用
rgba(0,0,0,0.05)这类极低透明度：Android 旧 WebView 会四舍五入为 0，直接不画 - 超过 3 层就谨慎；hover 动画中动态增减层数极易触发渲染抖动，改用预设
class切换整套样式 - 圆角+多层阴影时，
border-radius值不能是小数（如5.5px），iOS 易断裂
真正难的不是凑出三行 box-shadow，而是让它们在不同 DPR、缩放比例、滚动状态和系统功耗模式下始终清晰对齐——参数调得再准，设备一换，就可能糊边或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
