最左边的阴影在最上层，最右边的在最底层；应按近距投影（小偏移、低模糊）到远距漫射（大偏移、高模糊）顺序书写，inset若作高光须置最前，blur与spread需配合控制软硬与体积，避免超3层及极端参数以防真机渲染失效。
多重 box-shadow 不是“堆层数越多越好看”，而是靠顺序、参数配比和设备适配共同决定最终效果。写错顺序或盲目加层，真机上很可能糊成一团、掉帧、甚至部分阴影直接消失。
box-shadow 多层声明顺序怎么排才对
浏览器按逗号分隔的顺序从左到右绘制：**最左边的阴影在最上层，最右边的在最底层**。这和图层逻辑相反，但恰恰是模拟真实光照的关键。
- 想表现“纸张叠放”或“浮起感”，应先写小偏移+低模糊的近距投影（如
0 2px 4px rgba(0,0,0,0.1)），再写大偏移+高模糊的远距漫射（如0 12px 24px rgba(0,0,0,0.03)） - 混用
inset时，它默认在最底层；若要让它当高光浮在表面，必须写在阴影列表**最前面**（不是最后） - 常见错误：
box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.15)——模糊大的先画，直接盖住后面所有细节
blur 和 spread 怎么配才能不糊、不飘
单靠调大 blur 只会让阴影发虚变淡，真正塑造“离地高度”的是 blur 和 spread 的配合关系。
-
blur控制软硬：建议 4px–12px；blur: 0在高 DPR 屏上易锯齿，改用blur: 1px更稳 -
spread控制体积：正值外扩显远（如+2px），负值内收压边（如-2px）；超过 ±4px 容易像素断裂 - 典型组合：
0 2px 6px 2px rgba(0,0,0,0.15)（近层，厚实）、0 12px 24px 0 rgba(0,0,0,0.08)（远层，扩散）
移动端真机上阴影突然变淡或消失怎么办
这不是 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、缩放比例、滚动状态和系统功耗模式下始终清晰对齐——参数调得再准，设备一换，就可能糊边或错位。
