box-shadow多重投影需在单个声明中用逗号分隔多组参数，按顺序从前到后渲染，每组至少含水平与垂直偏移，推荐显式写出所有参数避免歧义。
box-shadow 多重投影的语法结构怎么写
多重投影不是叠加多个 box-shadow 声明，而是在单个属性值里用逗号分隔多组参数。浏览器会按从前往后顺序渲染：前面的阴影在上层，后面的在下层。
每组必须包含水平偏移、垂直偏移，其他参数（模糊半径、扩散半径、颜色、inset）可选但建议显式写出，避免歧义。
- 错误写法：
box-shadow: 2px 2px #000; box-shadow: 4px 4px #999;（后者会覆盖前者） - 正确写法：
box-shadow: 2px 2px 4px rgba(0,0,0,0.2), 4px 4px 12px rgba(0,0,0,0.1); - 带内阴影的组合：
box-shadow: inset 0 0 8px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15);
为什么第二层阴影常比第一层更“虚”也更远
视觉上模拟真实光源时，近处物体投出的影子边缘锐利、偏移小；远处或被多次散射的影子则更淡、更扩散。CSS 中靠调整模糊半径和透明度来模拟这种衰减。
- 第一层（近阴影）：
2px 2px 6px rgba(0,0,0,0.3)—— 小偏移 + 中等模糊 + 较高不透明度 - 第二层（远阴影）：
0 12px 24px rgba(0,0,0,0.12)—— 垂直偏移大 + 模糊大 + 透明度低 - 第三层（环境光晕）：
0 24px 48px rgba(0,0,0,0.08)—— 更大模糊 + 更低透明度，强化纵深感
注意：模糊半径过大（如超过 60px）在低端设备上可能触发软件渲染，导致滚动卡顿。
立即学习“前端免费学习笔记（深入）”；
移动端适配时 box-shadow 的常见坑
iOS Safari 和部分安卓 WebView 对多重阴影的硬件加速支持不稳定，尤其当模糊值高、层级多、又叠加了 transform 或 opacity 时，容易出现闪烁或渲染错位。
- 避免在
:active或transition中动态增删阴影层数，改用固定层数 + 调整透明度 - 真机测试时发现阴影“断层”，大概率是某一层的
spread-radius为负数且超出元素边界，被裁剪 —— 改用正数或去掉该参数 - 使用
will-change: box-shadow可能引发意外交互延迟，优先用transform: translateZ(0)触发 GPU 加速更稳妥
用 CSS 变量控制多层阴影的维护成本
直接硬编码多组 box-shadow 值会让后续修改（比如统一调暗所有层）变得痛苦。用 CSS 自定义属性把各层拆开，再拼接，可读性和复用性都更好。
button {
--shadow-1: 0 2px 6px rgba(0,0,0,0.15);
--shadow-2: 0 6px 16px rgba(0,0,0,0.1);
--shadow-3: 0 12px 32px rgba(0,0,0,0.08);
box-shadow: var(--shadow-1), var(--shadow-2), var(--shadow-3);
}
这样改深色模式只需覆盖变量：:root[data-theme="dark"] { --shadow-1: 0 2px 6px rgba(255,255,255,0.08); }。但注意：Sass/Less 编译时无法解析 var()，若用预处理器，得换思路 —— 比如封装成 mixin。
真正难的不是写几层阴影，而是让它们在不同缩放、不同 contrast 设置、不同 color-scheme 下依然保持可读又不刺眼。这点常被忽略，直到设计走查那天才暴露出来。
