根本原因是浏览器默认不给box-shadow开启硬件加速，导致CPU重绘卡顿；解决需显式声明transition、统一颜色格式、控制阴影层数与模糊值，并在Safari中避开border-radius与大模糊半径的冲突。
box-shadow transition 为什么一 hover 就卡
根本原因不是写法错，而是浏览器默认不给 box-shadow 开硬件加速——它走的是 CPU 重绘流水线，每一帧都要重新计算阴影形状、模糊采样、透明混合，尤其在中低端设备或 Safari 上，很容易掉到 30fps 以下。
常见现象包括：hover 瞬间“跳”一下才开始动、动画中途卡住、移动端完全不动、DevTools 的 Performance 面板里看到大量 Paint 耗时峰值。
- 别用
transition: all，它会意外拖慢其他属性；必须显式写transition: box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) - 起始和结束状态的阴影层数必须一致（比如都只写一层），否则浏览器直接放弃过渡
- 颜色格式要统一：全用
rgba()，别混用#000和rgb(0,0,0)，alpha 值变化才可插值 - 避免在 hover 中突然加
inset或删inset，它和外阴影无法平滑过渡
怎样让 box-shadow hover 流畅起来
核心思路是“把重活交给 GPU，轻活留给 CSS”。box-shadow 本身难加速，但你可以把它拆解、降权、外包。
- 把“抬升感”挪给
transform: translateY(-2px)，它天然支持硬件加速 - 把“柔化感”部分交给
filter: blur(0.5px)（慎用，仅限小范围微调） - 本体
box-shadow只保留基础投影，hover 前后都控制在 2 层以内，模糊半径别超 16px - 加
will-change: transform或transform: translateZ(0)提前触发合成层——但只加在需要动的元素上，别全局滥用
Safari 上 box-shadow 动画突然失效
iOS 15+ 有个隐藏限制：当 box-shadow 模糊半径 ≥ 30px 且元素带 border-radius 时，Safari 会静默禁用动画，卡死在第一帧，连 will-change 都救不回来。
立即学习“前端免费学习笔记（深入）”；
实测安全边界是：blur-radius ≤ 24px，spread-radius ≤ 4px（尤其 border-radius ≥ 12px 时）。
- 检测方式：在 Safari 开发者工具里临时删掉
border-radius，动画恢复 → 就是这个坑 - 绕过方案：改用
::after伪元素画阴影，本体只做transform和opacity动画 - 伪元素方案示例：
div::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 4px 12px -2px rgba(0,0,0,0.15); opacity: 0; transition: opacity 0.25s; }，hover 时设opacity: 1
呼吸感动画为什么看起来假
不是参数没配对，而是节奏错了。“呼吸”是缓慢放大 → 短暂停顿 → 柔和收缩，但很多人只调模糊值，结果像灯泡开关。
- 关键帧必须同步改三项：
blur-radius、spread-radius、rgba()的 alpha 值（例如从0.2到0.4） - 别写
0% { box-shadow: 0 0 0 0 transparent; }，这会导致断层；起始值应与正常态一致，比如0 0 8px 2px rgba(0,120,255,0.2) - 动画时长建议 2.4s～3.2s，用
ease-in-out不如cubic-bezier(0.34, 1.56, 0.64, 1)自然 - 多个组件同呼吸？那就完了——必须手动设不同
animation-delay和微调animation-duration（差值 > 0.3s 才明显错开）
border-radius 和 box-shadow 的模糊值比例失衡，Safari 就会悄悄关掉动画，而你还在调贝塞尔曲线。 
