浏览器不支持对 background-image（如 linear-gradient）直接过渡，因其属非可动画属性；可靠方案包括用 background-position 位移模拟流动、伪元素 opacity 切换或 box-shadow 模拟背景。
直接写 transition: background-image 0.3s 或 transition: background 0.3s 不会生效——浏览器不支持对 linear-gradient() 值做插值，这是规范限制，不是你代码写错了。
为什么 background-image 无法 transition
background-image 属于“非可动画属性”，CSS 动画模型不定义其插值规则。哪怕两个渐变结构完全一致（比如都是 to right, #f00, #00f），浏览器也只会硬切，没有中间帧。
- 写
transition: background-image 0.3s→ 静默忽略，hover 时突变 - 写
transition: background 0.3s→ 因为background是简写，会重置background-position和background-size，导致后续位移动画失效 - Chrome/Firefox 对 CSS 变量 +
linear-gradient(var(--a), var(--b))的插值支持始于 Chrome 111 / Safari 16.4，Firefox 至今（2026年中）仍不支持
用 background-position 位移模拟渐变流动
这是目前兼容性最好、最稳定的方式，本质是拖动一张“超宽渐变图”，靠位移制造平滑过渡感。
-
background-size必须设为400% 400%（至少 200%），否则位移范围太小，动画抽搐 -
background-position初始和目标值单位必须统一：都用%（如0% 50%→100% 50%），别混用px和% - 方向要匹配：水平流动只改第一个值，垂直流动只改第二个；双轴动需同步覆盖周期，例如
0% 0%→100% 100% - 避免在 hover 中写
background: linear-gradient(...)简写，它会清空之前设的background-size和background-position
用伪元素 + opacity 实现渐变切换
适合两个结构差异大（比如 to right vs to bottom）、颜色停靠点完全不同的渐变之间切换。
- 主元素设
position: relative，伪元素::before和::after绝对定位铺满 - 两层分别写不同
background-image: linear-gradient(...)，初始一层opacity: 1，另一层opacity: 0 - 加
transition: opacity 0.4s ease-in-out到伪元素上，hover 时切换 opacity - 必须加
background-clip: padding-box避免边框干扰叠加效果 - 别给伪元素加
will-change: opacity—— iOS Safari 容易卡顿或跳帧
移动端 hover 失效？先查父级 transform/opacity
iOS Safari（尤其 14 及更早）有个隐藏行为：如果按钮父容器有 transform（如 translateZ(0)）、opacity（哪怕 0.99）或 filter，子元素的 background-color 或伪元素 opacity 过渡可能被静默禁用。
- 快速验证：临时移除父级这些样式，看 hover 是否恢复
- 替代方案：把
transition提到父容器上，或改用box-shadow: inset 0 0 0 100px #xxx模拟背景填充（box-shadow过渡兼容性更好） - 对 iOS 用户，务必加
cursor: pointer，否则部分 Safari 版本不触发 hover
真正能动起来的只有标量属性：background-color、opacity、background-position。所谓“渐变过渡”，全是用这些可靠属性间接模拟出来的——选哪种方案，取决于你要换的是颜色深浅、方向，还是整个渐变结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
