卡片阴影跳变的根源是box-shadow缺少显式transition声明，需用transition: box-shadow 0.3s ease精准控制，并确保hover前后阴影参数维度一致、避免重排。

卡片阴影瞬间跳变，本质是 box-shadow 属性在切换时缺乏过渡动画。CSS 默认不会为 box-shadow 自动添加过渡效果，必须显式声明 transition 才能实现平滑浮起感。

确保 transition 正确作用于 box-shadow

常见错误是只写了 transition: all 0.3s，但某些浏览器对 all 的支持不一致，或被其他快速变化的属性（如 height、opacity）干扰。推荐精准控制：

• 用 transition: box-shadow 0.3s ease 明确指定只过渡阴影
• 避免写成 transition: all 0.3s 或漏掉 ease 缓动函数
• 把 transition 放在默认状态（非 hover）上，确保进出都有动画

阴影值需保持维度一致才能平滑过渡

box-shadow 是复合属性，包含 offset-x、offset-y、blur、spread、color。如果 hover 前后参数个数或单位不匹配（比如一个用 px，一个用 rem；或一个带 inset，一个不带），浏览器无法插值计算，就会“闪”一下。

• 默认状态建议写： box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1)
• hover 状态对应写： box-shadow: 0 8px 20px -4px rgba(0,0,0,0.15)
• 所有数值都用 px，inset 要么都加，要么都不加

避免触发重排导致动画卡顿

如果卡片本身宽高、边距或定位方式在 hover 时发生变化（比如突然加 margin-top: -2px 或改 transform），可能引发布局重排（reflow），掩盖阴影过渡效果，造成“跳”的错觉。

• 阴影浮起优先用 transform: translateY(-2px) 配合 box-shadow，而非修改 margin/padding
• 给卡片加 will-change: transform, box-shadow（仅在必要时），提示浏览器提前优化渲染层
• 确保父容器没有 overflow: hidden 裁剪了阴影区域，否则视觉上像“突然弹出”

兼容性与调试小技巧

老版本 Safari 或部分安卓 WebView 对 box-shadow 过渡支持较弱，可加一层保险：

• 同时过渡 transform 和 box-shadow：transition: transform 0.3s ease, box-shadow 0.3s ease
• 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看阴影变化是否触发意外重绘
• 临时把 box-shadow 换成 background: linear-gradient() 测试是否是阴影本身的问题

基本上就这些。核心就两点：过渡属性写对、阴影参数对齐。不复杂但容易忽略。