不可行；background-image含linear-gradient被W3C列为不可动画属性，浏览器不计算中间帧，transition无效，真正兼容方案是用background-position配合background-size模拟流动效果。
直接用 background-image: linear-gradient() 配合 transition: background-image 是可行的，但多数场景下会卡顿或掉帧——尤其在 Safari 和旧版 Chrome 中。真正平滑且兼容的方案，是避开过渡渐变本身，改用 background-position 移动一个宽幅渐变图。
为什么 background-image 过渡常卡顿？
渐变函数（linear-gradient、radial-gradient）不是“图像资源”，而是实时渲染的图形计算结果。浏览器对它的 transition 支持依赖渲染引擎优化，而 Safari 15–16、Chrome background-image 的渐变参数做硬件加速。实测中，悬停时 FPS 明显下降，甚至出现跳变。
- 错误写法：
transition: all 0.3s或transition: background 0.3s—— 会重置整个背景层，导致闪断 - 看似正确但仍有风险：
transition: background-image 0.3s—— 在部分安卓 WebView 和 iOS 15.4 以下 Safari 中不生效 - 真正稳定的做法：把渐变当“图”用，靠位移模拟颜色变化
用 background-position 实现丝滑过渡
核心思路是定义一个宽度远超容器的线性渐变（比如 background-size: 400% 100%），再通过移动 background-position 暴露不同色段，视觉上就是“颜色在流动”。这个属性被所有现代浏览器深度优化，动画帧率稳定在 60fps。
- 基础结构：
background-image: linear-gradient(to right, #ff6b6b, #4ecdc4, #44b5b1, #ff6b6b); background-size: 400% 100%; background-position: 0% 50%; - 悬停时只改
background-position: 100% 50%;，配合transition: background-position 1.2s ease infinite; - 如果要单次切换（非循环），hover 里设为
background-position: 100% 50%;，同时加transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);避免生硬 - 务必声明
background-repeat: no-repeat;，否则多段重复会穿帮
哪些细节不处理就会失效？
渐变背景常被父容器或自身样式意外截断、偏移，不是代码写错，而是默认渲染逻辑没对齐。
立即学习“前端免费学习笔记（深入）”；
-
background-origin默认是padding-box，如果你按钮有padding，渐变起点会从内边距边缘开始算——想从可视区域左上角起始，得显式写background-origin: border-box; -
background-clip默认也是border-box，但若用了border-radius且父容器有overflow: hidden，圆角处的渐变会被裁掉，需检查是否多套了一层限制 - 移动端要注意
viewport设置，initial-scale=1.0缺失会导致高 DPR 屏幕下background-size计算失准，渐变位移错位 - 不要在同一个选择器里混用
background简写和background-image单独声明——简写会覆盖掉你精心设置的background-size和background-position
最常被忽略的其实是“渐变作为动态效果时，它不该承担语义职责”。比如用渐变表示按钮激活态，就该搭配 aria-pressed 或 class 切换，而不是只靠视觉变化——性能只是表象，可访问性才是那个藏在 background-clip 后面的真问题。
