如何在CSS中使用box-shadow属性制作多重卡片投影-css教程-PHP中文网

box-shadow多重投影需在单个声明中用逗号分隔多组参数，按顺序从前到后渲染，每组至少含水平与垂直偏移，推荐显式写出所有参数避免歧义。

如何在css中使用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 时，容易出现闪烁或渲染错位。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

避免在 :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 下依然保持可读又不刺眼。这点常被忽略，直到设计走查那天才暴露出来。