最左边的阴影在最上层,最右边的在最底层;应按近距投影(小偏移、低模糊)到远距漫射(大偏移、高模糊)顺序书写,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、缩放比例、滚动状态和系统功耗模式下始终清晰对齐——参数调得再准,设备一换,就可能糊边或错位。


















