结论：多层 box-shadow 必须单条声明、逗号分隔，按“近层→远层”顺序书写，最多3层；inset 与 outset 需 offset 反向、blur 匹配；真机渲染受限于 blur>10px、层数>3 或透明度<0.05，应使用 CSS 变量统一管理并实测验证。
直接说结论：用单条 box-shadow 声明、逗号分隔 2–3 层阴影，按“近层→远层”顺序写，别分开声明，也别超过 4 层。
box-shadow 多层必须写在同一行，否则后值覆盖前值
常见错误是把多层阴影拆成多行写：
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 8px 16px rgba(0,0,0,0.08);
第二行会完全覆盖第一行，最终只生效最后一层。浏览器不合并声明，只取最后一条。
- 正确写法必须是单条声明，用逗号连接：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08), 0 16px 32px rgba(0,0,0,0.04); - 顺序决定图层上下关系：**最左边的阴影在最上层（视觉最近），最右边的在最底层（视觉最远）**
- 想模拟纸张叠放感？就按“小偏移+低模糊→大偏移+高模糊”从左到右排列
为什么加 inset 阴影后边缘发虚或变脏
混用 inset 和 outset 阴影时，不是参数没设对，而是光路逻辑冲突了。
立即学习“前端免费学习笔记（深入）”；
-
inset是向内挖，outset 是向外投，两者 offset-x/offset-y 必须反向且数值接近：比如外阴影用0 2px，内阴影就得用0 -2px -
inset的blur值建议 ≤ outset 的 60%：外阴影blur: 12px，内阴影别超7px - 慎用
inset+spread：它会让阴影向中心聚拢，容易造成卡片中间过暗、边缘断层 - 典型安全组合：
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04), inset 0 1px 1px rgba(0,0,0,0.05);
真机上阴影突然变淡或消失，不是代码错了
iOS Safari 和部分安卓 WebView 会在检测到以下情况时主动降级渲染：
-
blur> 10px（尤其低电量模式下） - 层数 > 3 层
-
rgba(0,0,0,0.05)这类极低透明度值——旧 Android WebView 会四舍五入成 0，直接不画
上线前务必在真机 Safari / Chrome 中实测，别信 DevTools 模拟器。推荐安全值：box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
用 CSS 变量管理多层阴影更可控
把每层的偏移、模糊、透明度抽成变量，改一处就能全局同步，避免魔法数字散落各处。
- 定义示例：
:root { --shadow-near: 0 2px 4px rgba(0,0,0,0.1); --shadow-far: 0 12px 24px rgba(0,0,0,0.04); } - 调用：
box-shadow: var(--shadow-near), var(--shadow-far); - 注意：旧版 Safari 不支持在
calc()中嵌套变量做动态计算，宽度/偏移类数值建议提前算好再定义 - 移动端需响应式调整？用
@media重设变量值，比重复写整条box-shadow更干净
真正难调的从来不是语法，而是每层阴影是否对应一个真实的物理位置：光源在哪、卡片离背景多高、材质是否反光——这些决定了你该用什么 offset、blur 和 alpha，而不是抄来就贴。
