真实立体感关键在于x/y-offset、blur-radius比例及spread-radius协同，而非堆叠层数；微浮起用负spread收紧阴影，中等悬浮blur≈3×y-offset，明显抬升需双层阴影模拟环境光。
box-shadow 要想做出真实立体感，关键不是加多层阴影，而是控制 x-offset、y-offset 和 blur-radius 三者的比例关系，再配合 spread-radius 控制膨胀程度 —— 大多数“假阴影”问题都出在这几个值的失衡上。
为什么卡片阴影看起来扁平或漂浮？
常见错误是直接套用在线生成器给的 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，结果所有卡片像贴在页面上或悬空飘着。本质原因是：
-
y-offset过小（如2px）+blur-radius过大（如20px）→ 阴影扩散过度，失去方向感和距离暗示 - 没用
spread-radius微调阴影大小 → 导致阴影边缘和卡片底边对不齐，视觉脱节 - 忽略环境光逻辑：真实物体离表面越近，阴影越锐利、越窄；越远则越柔和、越宽且偏移越大
如何按卡片高度分层设置 box-shadow 参数？
把卡片想象成物理对象，其“抬升高度”决定阴影形态。可参考这套映射关系（单位 px）：
- 微浮起（2–4px 高度）→
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1)（负spread-radius收紧阴影，贴近底边） - 中等悬浮（6–8px）→
box-shadow: 0 4px 12px -1px rgba(0,0,0,0.12)（blur≈ 3×y-offset，spread略负） - 明显抬升（12px+）→ 用双层阴影模拟环境光 + 投影：
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1), 0 12px 24px -4px rgba(0,0,0,0.08)
rgba 透明度和 blur-radius 的协同影响
blur-radius 不是越大越好，它和 alpha 值必须匹配。例如：
立即学习“前端免费学习笔记（深入）”；
-
blur-radius: 20px搭配rgba(0,0,0,0.3)→ 阴影过重，像蒙了层灰，丧失层次 -
blur-radius: 20px搭配rgba(0,0,0,0.04)→ 阴影太淡，几乎不可见 - 经验比例：当
blur-radius≥ 12，alpha宜控制在0.06–0.12区间；每增加 5px blur，alpha 最多加 0.02
移动端适配与性能陷阱
在 iOS Safari 或低端安卓机上，过大 blur-radius（如 >30px）可能触发全图高斯模糊，导致滚动卡顿或内存飙升。稳妥做法：
- 用媒体查询降级：
@media (max-width: 768px) { .card { box-shadow: 0 2px 8px -1px rgba(0,0,0,0.08); } } - 避免在
:hover中突变blur-radius（比如从4px跳到24px），改用transform: translateY(-2px)配合小幅阴影过渡更流畅 - 不要给
box-shadow加transition: all—— 应明确写成transition: box-shadow 0.2s ease，否则会连颜色、透明度一起过渡，造成意外闪烁
真正难的不是写出一串参数，而是理解每个数字背后的空间关系：y-offset 是“高度”，blur-radius 是“空气散射程度”，spread-radius 是“接触面压缩感”。调阴影时盯着卡片底部边缘看，那里才是立体感的锚点。
