图片hover阴影突变需添加transition: box-shadow 0.3s ease;并设初始box-shadow为透明值，参数结构须一致，配合transform微调及GPU加速可提升流畅度。
图片 hover 时阴影突变，是因为 box-shadow 默认没有过渡效果。只需给元素添加 transition 属性，就能让阴影变化平滑自然。
确保 transition 正确作用于 box-shadow
很多情况下阴影不流畅，是因为 transition 没有明确指定要过渡的属性，或写在了错误的选择器上。
- 必须显式写
transition: box-shadow 0.3s ease;，不能只写transition: all 0.3s;（虽然能用，但性能差、行为不可控） - transition 要加在默认状态（非 hover）的图片上，而不是 hover 里
- 初始状态的
box-shadow值不能是none，建议设为box-shadow: 0 0 0 transparent;，否则部分浏览器会跳帧
统一阴影参数结构，避免过渡中断
box-shadow 的四个值（offset-x offset-y blur-radius spread-radius color）必须一一对应，否则浏览器无法插值计算中间状态。
- hover 前后都写满 5 个参数，例如：
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);box-shadow: 0 6px 12px 2px rgba(0,0,0,0.15); - 避免从
none→ 有值，或改变参数个数（如漏掉spread-radius），会导致“闪一下”再过渡
配合 transform 微调，增强悬浮真实感
单靠阴影略显单调，叠加轻微上移 + 阴影加深，更符合物理直觉。
立即学习“前端免费学习笔记（深入）”；
- 默认状态：
transform: translateY(0); box-shadow: 0 2px 6px 0 rgba(0,0,0,0.08); - hover 状态：
transform: translateY(-4px); box-shadow: 0 8px 16px -2px rgba(0,0,0,0.16); - transition 可合并写：
transition: transform 0.3s ease, box-shadow 0.3s ease;
注意浏览器兼容与硬件加速
老版本 Safari 或低配设备可能对 box-shadow 过渡卡顿。
- 给图片容器加
will-change: transform;（仅 hover 前触发，慎用） - 更稳妥的做法是启用 GPU 加速：
transform: translateZ(0);或backface-visibility: hidden;在默认状态中添加 - 避免在大量图片上同时触发 hover 动画，可加节流或使用
:hover:not(:active)优化响应
