box-shadow动画为什么看起来“平”？
因为默认的 box-shadow 动画只在 offset-x 和 offset-y 上线性变化，人眼对深度感知依赖的是阴影大小、模糊度和透明度的协同变化——单靠位移，只是“滑动”，不是“靠近/远离”。
- 纯
offset-x/offset-y动画：像贴着地面拖动盒子，没有Z轴感 - 真正有深度的随动：阴影需同步缩放（
blur-radius）、变淡（rgba()的 alpha）、并轻微偏移（模拟光源固定时的透视关系） - 浏览器对
box-shadow多参数同时动画的性能尚可，但若每帧都重绘大模糊值，低端设备会掉帧
关键帧里怎么配shadow参数才像在动真格的？
核心是让四个值联动：offset-x、offset-y、blur-radius、rgba() 里的 alpha。别用 inset，它破坏外凸深度感；也别写死 spread-radius，它会让阴影边缘生硬。
- 靠近效果（如鼠标悬停）：
offset-x/offset-y减小（比如从4px 4px→2px 2px），blur-radius缩小（12px→6px），alpha 增大（rgba(0,0,0,0.15)→rgba(0,0,0,0.25)） - 远离效果（如弹出动画）：反向操作，偏移加大、模糊拉宽、alpha 略降（避免过重发黑）
- 示例关键帧：
@keyframes shadow-depth { 0% { box-shadow: 4px 4px 12px rgba(0,0,0,0.15); } 100% { box-shadow: 2px 2px 6px rgba(0,0,0,0.25); } }
transition和@keyframes选哪个？
看触发方式。鼠标悬停、焦点切换这类简单双向交互，用 transition 更轻量；需要精确控制节奏（比如先快后慢的逼近感）、或多个状态轮播，必须上 @keyframes + animation。
-
transition坑点：不能单独过渡某个 shadow 参数，必须写全box-shadow值，否则会退化为“跳变” -
animation坑点：别设animation-fill-mode: forwards后又手动改box-shadow，css 层叠优先级容易打架 - 兼容性注意：IE 完全不支持
box-shadow动画，safari 旧版对多值 transition 支持不稳定，建议加-webkit-前缀
移动端阴影动画卡顿怎么办？
根本原因是大 blur-radius 强制触发软件渲染，尤其在 ios Safari 上。不是加 will-change: transform 就能救——box-shadow 不在 GPU 加速属性列表里。
立即学习“前端免费学习笔记（深入）”；
- 实测有效方案：把
blur-radius控制在8px以内，靠 alpha 和偏移微调来“骗”深度感 - 替代思路：用伪元素
::after绘制一个半透黑色圆角矩形，用transform: scale()模拟阴影缩放，它可被硬件加速 - 底线原则：动画中避免同时更新
box-shadow和transform，重排重绘叠加会雪上加霜
阴影的“深度错觉”本质是光学经验的复现，参数之间差 2px 或 0.03 的 alpha，人眼就可能觉得假。调的时候盯着真实物体的投影看两分钟，比查文档管用。