统一 transition-timing-function 可解决 box-shadow 跳变问题，需显式声明所有过渡属性并共用同一贝塞尔曲线；box-shadow 必须写全四项数值且颜色统一用 rgba()；必要时用 transition-delay 错开动画节奏或改用 @keyframes 精确控制。
transition-timing-function 不统一导致阴影跳变
阴影变化（box-shadow）和位置/尺寸等属性在 CSS 过渡中表现突兀，根本原因常是浏览器对不同数值类型插值方式不一致，再加上默认的 cubic-bezier(0.25, 0.1, 0.25, 1.0)（即 ease）在阴影模糊半径、偏移量等多维变化时容易产生非线性“抖动”。尤其当阴影从 0 0 0 #000 突然扩展到 0 4px 12px rgba(0,0,0,0.15)，视觉上会像“炸开”一样。
用同一个 cubic-bezier 控制所有过渡属性
必须显式声明全部参与过渡的属性共用同一 timing 函数，不能依赖 transition: all 0.3s 这种写法——它会让每个属性各自按默认 ease 插值，实际效果仍是脱节的。正确做法是把关键属性列全，并统一 timing 函数：
button {
transition-property: background-color, transform, box-shadow;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
这个贝塞尔曲线（接近 ease-out 但收尾更平缓）能压住阴影扩散的爆发感。注意：transition-timing-function 是全局生效的，只要 transition-property 列出的属性都会受其影响。
box-shadow 的数值结构要可线性插值
阴影值不是原子单位，而是四个独立数值：offset-x offset-y blur-radius spread-radius color。如果起始或结束状态中任意一项缺失（比如漏写 spread-radius），浏览器会补 0，但插值时 0 → 非零 会产生阶跃感。确保两端都写全：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
box-shadow: 0 0 0 #000; → box-shadow: 0 4px 12px rgba(0,0,0,0.15);（缺 spread-radius） - 正确写法：
box-shadow: 0 0 0 0 rgba(0,0,0,0); → box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
颜色也建议统一用 rgba()，避免 transparent 和 rgba(0,0,0,0) 在部分浏览器中插值不一致。
必要时拆分过渡阶段
如果阴影 + 位移 + 缩放同时变化仍卡顿，说明单一时序函数难以兼顾所有维度。可考虑用 transition-delay 错开节奏：
button {
transition:
transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1),
box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}
让阴影晚 50ms 启动，视觉上反而更“跟手”。不过这会增加维护成本，只在真实用户反馈突兀时再启用。
真正难调的是 blur-radius 和 opacity 的耦合——它们共同决定“软硬感”，但浏览器插值时并不感知语义。这时候别硬调 timing 函数，改用 @keyframes 手动控制每帧的 shadow 值，虽然麻烦，却是唯一可靠解法。
