直接写 background 悬停会失效，因它是简写属性会重置所有背景子属性；应统一用 background-image 控制渐变并显式声明 transition: background-image，方向用 to right 等关键词更直观，多色渐变需设色标位置，卡顿时宜用 background-position 过渡宽幅渐变图。
能用纯 CSS3 实现，不需要 JS，但必须注意 background-image 和 transition 的配合方式，否则悬停时会闪断或不生效。
为什么直接写 background: linear-gradient(...) 悬停会失效？
因为 background 是简写属性，它会覆盖 background-color、background-image、background-position 等所有子属性。一旦你在 :hover 里只改 background，浏览器会重置整个背景层，导致渐变动画中断或跳变。
- 错误写法：
background: linear-gradient(to right, #f00, #0f0);→ hover 里再写background: linear-gradient(to right, #0f0, #00f);，动画不连贯 - 正确做法：统一用
background-image控制渐变，background-color仅作降级 fallback - 必须给
transition明确指定background-image，不能只写all或省略
linear-gradient() 方向参数怎么选才不翻车？
方向关键词（如 to right）比角度值（如 90deg）更直观，但两者等价；容易出错的是「起点终点反了」导致渐变方向和预期相反。
-
to right=90deg：从左到右过渡 -
to bottom=180deg：从上到下过渡 - 写
to bottom right时，注意它是对角线，不是先下后右——这是单个方向，不是组合动作 - 多色渐变要控制色标位置，比如
linear-gradient(to right, #ff0 0%, #0ff 50%, #00f 100%)，否则颜色会堆在起点
悬停动画卡顿或不平滑怎么办？
渐变本身不支持硬件加速，background-image 的 transition 在旧版 Chrome 或 Safari 上可能掉帧。关键不是加 will-change，而是换思路。
立即学习“前端免费学习笔记（深入）”；
- 优先用
background-position移动一个宽幅渐变图（比如background-size: 400% 100%），再过渡background-position，比直接过渡渐变色更稳定 - 避免在 :hover 中同时改
background-image和color—— 分开写transition，比如transition: background-image 0.3s, color 0.2s - 如果按钮有
border-radius，确保父容器没overflow: hidden截断渐变溢出区域（尤其圆角大时）
最常被忽略的点是：渐变容器默认尺寸等于元素 content-box，但如果你用了 background-size 或 background-position，就得同步检查 background-origin 和 background-clip 是否影响显示范围——尤其是带内边距或边框的按钮。
