box-shadow多层叠加需在同一声明中用逗号分隔，如box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15), 0 16px 32px rgba(0,0,0,0.1)；浏览器从左到右逐层绘制，最左在最上层。
box-shadow 多层叠加的语法结构怎么写？
单个 box-shadow 属性支持用逗号分隔多个阴影值，浏览器按从左到右顺序逐层绘制——最左边的阴影在最上层，最右边的在最底层。这是实现深度感的基础逻辑，不是“叠加”而是“层叠绘制”。
常见错误是把多个 box-shadow 写成多行或重复声明，比如：
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 后者会覆盖前者 */
正确写法必须在同一行内用逗号连接：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.15), 0 16px 32px rgba(0,0,0,0.1);
- 每个阴影的
offset-y应递增（如 2px → 8px → 16px），模拟不同高度投下的影子 - 模糊半径（第三个值）也建议递增，越远的阴影越“虚”，更符合物理直觉
- 透明度（rgba 的第四个参数）宜逐步降低（0.2 → 0.15 → 0.1），避免底层阴影抢眼
为什么阴影层数不是越多越好？
超过 3–4 层 box-shadow 后，视觉提升极小，但渲染开销明显上升——尤其在滚动或动画中，每帧都要重绘多层高斯模糊，iOS Safari 和低端安卓 WebView 容易掉帧。
立即学习“前端免费学习笔记（深入）”；
实测对比（以 200×200px 元素为例）：
- 2 层：几乎无性能影响
- 4 层：Chrome DevTools 的 Rendering 面板可见“Layer Paints”耗时翻倍
- 6 层以上：部分 Android 旧机型出现明显卡顿，且人眼已难分辨差异
真正有用的组合通常是 2–3 层：一层近距锐影（强调边缘）、一层中距柔影（建立主深度）、一层远距淡影（暗示空间距离）。
如何让 box-shadow 深度感不显得“假”？
真实阴影有方向、衰减和遮挡，纯 box-shadow 缺乏这些。要避免“浮在空中”的塑料感，需配合其他样式微调：
- 给元素加轻微
transform: translateY(1px)，模拟它略微“压”在下层内容上 - 下层容器背景色不能是纯白，用
#f8f9fa这类浅灰，让阴影有落点参照 - 如果父容器有
overflow: hidden，远距阴影会被裁切——此时应改用伪元素 +filter: blur()模拟，或扩大父容器 padding - 避免所有阴影都用相同
offset-x；可给第二层加-1px横向偏移，模拟光源非正上方
移动端适配时容易忽略的关键点
iOS Safari 对多层 box-shadow 的模糊渲染精度较低，常导致最外层阴影发虚甚至消失。这不是 bug，是 WebKit 为省电做的主动降级。
稳妥做法：
- 用
@supports (box-shadow: 0 0 #000)做基础支持检测，再用 JS 检查window.devicePixelRatio > 2判断是否高清屏 - 对 iPhone 等设备，主动减少层数（如只保留前两层），或改用 SVG 阴影滤镜（
<fedropshadow></fedropshadow>）替代 - 绝对不要依赖
box-shadow做关键视觉分隔——它可能被系统深色模式、缩放设置或辅助功能开关干扰
真正难的不是堆叠几层，而是判断哪一层该弱一点、哪一层该偏一点、在哪种设备上该悄悄退化。深度感最终靠克制来实现。
