hover阴影不平滑的主因是transition未写在默认状态或box-shadow结构不一致；须在基础样式中声明transition: box-shadow 0.3s ease，并确保起始与结束值参数个数、顺序及关键字统一。
hover 时阴影变化不平滑？transition 必须写对位置
阴影动画不生效，大概率是 transition 没写在元素的默认状态（非 hover）上，或者过渡属性名写错了。CSS 的 transition 只在「属性值实际发生变化」时才触发，而 box-shadow 是可过渡属性，但必须显式声明。
-
transition要写在基础样式里（比如.card { ... }），不能只写在:hover里 - 必须指定过渡的属性：用
transition: box-shadow 0.3s ease;，不能只写transition: all 0.3s;（虽能动，但性能差、不可控） - 起始和结束的
box-shadow值结构要一致（比如都带模糊半径、偏移量、颜色），否则浏览器可能跳变或退回到默认无过渡
box-shadow 值怎么写才能保证可过渡
CSS 会逐个数值比对 box-shadow 的四个参数（offset-x offset-y blur-radius spread-radius color），如果某一项缺失（比如没写 spread-radius），浏览器会补 0；但如果 hover 前后参数个数不一致（如一个写了 4 个值，另一个写了 5 个），就可能中断过渡。
- 安全写法：始终显式写出全部 5 个值，用
0占位不需要的部分
例如：box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); - 避免混用关键字（如
inset）：前后都加或都不加，否则无法过渡 - 颜色推荐用
rgba()或十六进制，别用transparent和rgba(0,0,0,0)混用，Alpha 值变化才真正可缓动
常见失效场景与修复示例
下面这个例子常被复制粘贴却动不了——问题出在 transition 位置和 box-shadow 结构不匹配：
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}
✅ 正确：过渡定义在默认状态；两个 box-shadow 都是 3 个长度值 + 颜色，结构一致。
❌ 错误写法举例：
– 把 transition 写进 :hover 块里
– 默认用 box-shadow: none，hover 改成带值的，此时 none 不是数值，无法插值
– 默认阴影带 inset，hover 去掉了，结构断裂
立即学习“前端免费学习笔记（深入）”；
需要更精细控制？用自定义属性 + transition
如果多个阴影参数都要独立缓动（比如只想动模糊值，不动偏移），原生 box-shadow 过渡做不到——它只能整体插值。这时可以改用 CSS 自定义属性模拟，配合 @property（需 Chrome 110+）或 JS 控制。
- 简单兼容方案：用两个 class 切换，配合
transition控制 opacity / transform 辅助视觉强化 - 高阶需求：用
@property注册--shadow-blur，再在box-shadow中引用：box-shadow: 0 0 var(--shadow-blur) rgba(0,0,0,0.1); - 注意：IE 和旧版 Safari 不支持
@property，生产环境慎用
transition 写错了地方，或者让 box-shadow 从「有」突然变成「无」，浏览器根本没法插值。 
