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 写成多行或重复声明，比如：

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>）替代
• 绝对不要依赖 box-shadow 做关键视觉分隔——它可能被系统深色模式、缩放设置或辅助功能开关干扰

真正难的不是堆叠几层，而是判断哪一层该弱一点、哪一层该偏一点、在哪种设备上该悄悄退化。深度感最终靠克制来实现。