图片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) 优化响应