box-shadow 单独加 transition 会卡顿，因仅过渡阴影触发频繁重绘且 GPU 加速不生效；需搭配 transform 或 will-change 触发硬件加速，并同步过渡 transform 与 box-shadow 实现顺滑悬停效果。
直接加 transition 就能动，但阴影突兀、卡顿、移动端失效——问题不在写法，而在过渡属性和阴影层级的配合方式。
为什么 box-shadow 单独加 transition 会卡顿？
CSS 动画卡顿常因浏览器频繁重绘。只对 box-shadow 做过渡，每次悬停都会触发 layout + paint，尤其阴影参数多时（比如 0 10px 25px -5px rgba(0,0,0,0.1)），GPU 加速不生效。
- 必须搭配
transform: translateZ(0)或will-change: transform触发硬件加速 -
transition不要只写box-shadow，改用all 0.3s ease或明确列出box-shadow, transform - 避免在悬停时动态改变
height/width，否则强制重排，阴影过渡立刻变拖影
推荐写法：用 transform 微调位置 + 阴影渐变
真正顺滑的卡片悬停不是“只加阴影”，而是“抬升 + 扩散阴影”同步发生，视觉上更自然。
card {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
card:hover {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
-
transform: translateY(-2px)比margin-top: -2px更高效，不触发重排 - 阴影的
blur和spread值要阶梯式增大，避免从6px跳到25px这种跳跃感 - 移动端 Safari 对
:hover支持不稳定，需加@media (hover: hover)包裹或补一层:focus-within
阴影颜色和透明度怎么选才不显脏？
用纯黑 rgba(0,0,0,0.2) 容易让卡片像蒙灰；真实场景中，阴影应略带环境色或降低饱和度。
立即学习“前端免费学习笔记（深入）”；
- 浅色背景用
rgba(0,0,0,0.08)~0.12，深色背景改用rgba(255,255,255,0.05) - 避免
box-shadow: 0 0 0 1px rgba(0,0,0,0.1)这类“描边式阴影”，它在高 DPI 屏上易发虚 - 如需差异化，可对
:hover单独加一层inset阴影模拟内凹光感：box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.03)
最易被忽略的是阴影的 offset-y 值——设太大（比如 15px）会让卡片像飘起来脱离容器，设太小（2px）又看不出变化。建议从 4px → 8px 开始试，再微调 blur 和透明度。
