多层 box-shadow 应采用偏移为0、模糊半径递增、透明度递减的组合：第一层0 2px 4px rgba(0,0,0,0.1)，第二层0 4px 12px rgba(0,0,0,0.08)，第三层0 8px 24px rgba(0,0,0,0.05)。
box-shadow 多层叠加怎么写才不糊
多层 box-shadow 不是简单堆叠数字，关键在「偏移为0 + 模糊半径递增 + 透明度递减」。否则阴影会发虚、变灰、失去层次感。
- 第一层：紧贴卡片，
box-shadow: 0 2px 4px rgba(0,0,0,0.1)—— 模拟近处投影，模糊小、透明度高 - 第二层：往外扩散，
0 4px 12px rgba(0,0,0,0.08)—— 偏移加大，模糊扩大，透明度略降 - 第三层（可选）：更远的氛围光晕，
0 8px 24px rgba(0,0,0,0.05)—— 模糊大但极淡，避免压暗背景
常见错误是三层都用 rgba(0,0,0,0.2)，结果阴影“糊成一块”，视觉上反而显得脏。
为什么 spread-radius 设为正值反而让阴影变薄
spread-radius 是向外扩展阴影边缘的尺寸，但它不增加明暗对比，只拉伸已有的渐变区域。设正数后，相同模糊值下，阴影能量被摊得更开，人眼感知就变“淡”了。
- 想加厚阴影边缘？别靠
spread-radius，改用第二层box-shadow的偏移 + 小模糊组合 - 设
spread-radius为负值（如-2px）确实能收窄阴影，但容易导致边缘生硬、脱离真实光照逻辑 - 移动端尤其注意：iOS Safari 对负 spread 支持不稳定，可能直接忽略整条声明
box-shadow 层叠顺序和 z-index 无关
box-shadow 渲染层级永远在元素自身之上、其子元素之下，不受 z-index 影响。这是很多人调错位置的根本原因。
立即学习“前端免费学习笔记（深入）”；
- 如果卡片里有图标或文字被阴影盖住，不是 shadow 太强，而是子元素没提
position: relative+z-index - 卡片本身加
z-index: 1没用；必须给内容层（比如.card__content）显式提升层级 - 阴影不会响应鼠标事件，但过大的模糊值会让点击热区误判——建议最大模糊控制在
32px内
性能敏感场景下 box-shadow 的取舍
连续滚动或动画中频繁重绘多层 box-shadow 会触发全层重排，尤其在低端安卓机上掉帧明显。
- 动画中优先用
transform+ 单层浅阴影，而非top/left位移 + 多层 shadow - 用
will-change: transform可提前提示渲染引擎优化，但别滥用——只加在真正会动的卡片容器上 - SSR 或静态站点中，若卡片数量超 20 个，建议用伪元素
::after绘制单层 SVG 阴影替代 CSS，减少样式计算压力
最易被忽略的是：阴影的模糊半径每增加 1px，GPU 纹理采样量呈平方级增长。看似只是调个数字，实则悄悄拖慢整个列表滚动。
