卡片阴影跳变的根源是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()测试是否是阴影本身的问题
基本上就这些。核心就两点：过渡属性写对、阴影参数对齐。不复杂但容易忽略。
