CSS如何用多重box-shadow制作深度感层叠效果？

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: 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层后，视觉提升有限，而渲染开销显著增加。尤其在滚动或动画中，每帧都需要重绘多层高斯模糊，iOS Safari 和低端安卓 WebView 特别容易掉帧。

实测对比（以200×200px元素为例）：

• 2层：几乎感觉不到性能影响。
• 4层：Chrome DevTools的Rendering面板中，“Layer Paints”耗时翻倍。
• 6层以上：部分Android老机型出现明显卡顿，且人眼难以分辨与4层的区别。

真正有效的组合通常为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) 做基础支持检测，再用 JavaScript 检查 window.devicePixelRatio > 2 判断是否为高清屏。
• 对iPhone等设备，主动减少层数（如只保留前两层），或改用SVG阴影滤镜（）替代。
• 绝对不要依赖 box-shadow 做关键视觉分隔——它可能被系统深色模式、缩放设置或辅助功能开关干扰。

真正困难的不在于堆叠几层阴影，而在于判断哪一层该弱一点、哪一层该偏一点、在哪种设备上该悄悄降级。深度感，归根结底靠克制来实现。