多层box-shadow按从左到右顺序绘制，第一个在最底层、最后一个在最顶层；需反向配置inset与outset偏移、控制blur比例、避免spread滥用，并统一声明于单行以确保真机兼容性。
多层 box-shadow 不是“堆得越多越立体”，而是靠顺序、偏移方向和透明度的逻辑配合；写错一层就可能让整个阴影看起来发虚、浮不起来，甚至在真机上直接变淡或消失。
多层 box-shadow 的绘制顺序怎么理解
浏览器按你写的顺序从左到右绘制：第一个阴影在最底层，最后一个在最顶层。这和层叠上下文（z-index）相反，也和多数人直觉相反——复制粘贴时容易把高光阴影（比如浅色 inset）写在最后，结果它盖住了主投影，立体感就没了。
- 想模拟左上光源？先写右下偏移的主投影：
4px 4px 12px rgba(0,0,0,0.15) - 再写左上偏移的浅高光：
-2px -2px 4px rgba(255,255,255,0.8) - 如果调换顺序，高光会被主投影压住，变成“灰蒙蒙一块”
inset 和 outset 混用时为什么边缘发虚
内阴影（inset）本质是“向内挖”，外阴影是“向外投”，两者光路方向必须对齐，否则视觉逻辑冲突。常见错误是 offset 值没反向、blur 值没比例控制。
-
offset-x/offset-y必须反向且数值接近：外阴影用0 2px，内阴影就得用0 -2px - 内阴影的
blur建议 ≤ 外阴影的 60%，比如外阴影blur: 12px，内阴影别超7px - 慎用
spread+inset：它会让阴影向中心聚拢，极易造成中间过暗、边缘断层
移动端真机上阴影突然变淡或消失
不是 CSS 写错了，是 iOS Safari 和部分安卓 WebView 主动降级：检测到 blur > 10px 或层数 > 3 层时，会截断 alpha 值或丢弃某层——尤其低电量模式下更明显。
- 上线前必须在真机 Safari / Chrome 中实测，别信 DevTools 模拟器
- 避免用
rgba(0,0,0,0.05)这类极低透明度值：旧 Android WebView 会四舍五入成 0，直接不画 - 常用安全值参考：
box-shadow: 0 4px 8px rgba(0,0,0,0.12)（3 层以内，blur ≤ 8px）
为什么 spread-radius 在多层中容易出问题
spread 控制阴影整体缩放，但它在多层中不“叠加”，而是每层独立生效。当多层都设了正 spread，尤其是配合不同 blur，容易导致边缘膨胀、内外脱节，看起来像“毛边”。
- 卡片类效果建议
spread: 0或微负值（如-1px），靠偏移+模糊营造距离感 - 发光边框等特殊场景可用
spread，但只用 1 层，且blur设为 0（如0 0 0 3px #4ade80） - 所有阴影必须写在同一行
box-shadow声明中，用逗号分隔；分开写会覆盖前值
真正难调的从来不是语法，而是每层阴影的物理意义是否自洽：光源在哪、物体离地多高、材质反光强弱——这些决定了偏移方向、模糊梯度和透明度衰减。写完别急着看效果，先问一句：这个阴影，光是从哪来的？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
