box-shadow多层语法需在同一声明中用逗号分隔，顺序从前往后依次叠加（第一个最靠前，最后一个最靠后），如box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1)；重复声明会覆盖而非叠加。
box-shadow 多层语法怎么写
直接在 box-shadow 属性值里写多个投影，用逗号分隔，顺序从前往后依次叠加（第一个最靠前，最后一个最靠后）。浏览器原生支持，无需额外 polyfill。
常见错误是把多个 box-shadow 声明写成多行或重复属性——CSS 会覆盖而非叠加。必须写在同一个声明里：
button {
box-shadow: 0 2px 4px rgba(0,0,0,0.1),
0 4px 12px rgba(0,0,0,0.15),
0 8px 24px rgba(0,0,0,0.1);
}
注意：每个投影的四个值（h-offset v-offset blur spread）缺一不可，spread 可为 0 或负数，但不能省略。
为什么内层阴影看起来“不明显”
多层阴影容易出现前层被后层“吃掉”的情况——本质是模糊半径（blur）和扩散半径（spread）没配合好。越靠近元素的阴影，blur 应越小、spread 可为正值微扩；越外层的阴影，blur 要增大，spread 通常为 0 或负值收边。
-
0 1px 2px -1px rgba(0,0,0,0.2)—— 紧贴按钮的锐利暗边（spread为负，收缩边缘） -
0 4px 8px 0 rgba(0,0,0,0.12)—— 中层过渡阴影 -
0 12px 24px 0 rgba(0,0,0,0.08)—— 外层柔和扩散
透明度也得递减：内层可到 0.2，外层建议 ≤ 0.1，否则视觉上会糊成一团。
hover 动态加阴影时要注意什么
直接在 :hover 里改 box-shadow 值没问题，但若涉及 spread 正负切换或模糊值大幅跳变，可能触发重绘抖动。稳妥做法是保持每层参数维度一致，只调透明度和 v-offset：
button {
box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08);
}
button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.12);
}
避免在 hover 中新增一层阴影（比如从 2 层变成 3 层），会导致布局计算不稳定；如真需增层，务必同时定义默认态的占位层（用 transparent 占位）。
移动端 Safari 的兼容性坑
iOS 15+ 之前，Safari 对多层 box-shadow 的 spread 支持有偏差，尤其负值容易被忽略或渲染异常。验证方式很简单：在真机 Safari 打开，对比 Chrome 表现。
绕过方案：
– 尽量不用负 spread，改用更小的 blur + 低透明度模拟锐利感
– 或对 iOS 加 class 降级处理：
@supports (-webkit-appearance: none) {
.btn-ios .btn {
box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.08);
}
}
真正麻烦的是带 inset 的混合阴影——iOS 不支持多层中混用 inset 和外阴影，必须拆成两个独立元素模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
