浏览器不支持 background（含渐变）的 CSS 过渡插值，导致跳变而非平滑过渡；应改用伪元素叠加 opacity 过渡或 class 切换预设渐变动画。
直接给 .btn 加 transition: background 0.3s 和 background: linear-gradient() 是无效的——浏览器不支持 background（含渐变）的 CSS 过渡插值，结果只会跳变，不是渐变。
为什么 background-color 无法过渡渐变
background-color 只能过渡纯色，一旦你写的是 linear-gradient()，它就不再是单一颜色值，而是图像层。CSS 规范不定义如何在两个渐变之间做插值，Chrome/Firefox 都会忽略 transition 或直接硬切。
- 检查开发者工具里:hover 状态是否真的生效：如果
background被 Bootstrap 的background-color: #007bff !important覆盖，渐变根本不会渲染 - 即使渐变显示出来，
transition: background也大概率被静默忽略——这不是 bug，是规范限制 - 用
background-image替代background可保留原有background-color逻辑（比如 disabled 态），更安全
用伪元素叠加实现可过渡的“渐变感”
真正可靠、零兼容性问题的方案：不改按钮底色，而用半透明 ::before 层叠加，靠 opacity 过渡模拟亮化/加深效果。
- 保持原按钮所有交互状态（
:focus、:active、:disabled）完全不受影响 - 只需声明
transition: opacity 0.3s ease，浏览器原生支持，无亚像素模糊 - 示例代码中
background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent)是浅色叠加，深色背景可反向调色或改用rgba(0,0,0,0.1) - 务必加
position: relative和overflow: hidden，否则伪元素可能溢出边框
真要换渐变色块，别依赖 transition 插值
如果设计要求必须从蓝渐变切换到紫渐变（而非叠加效果），transition 不是正确工具——该用 class 切换 + CSS 动画或 JS 控制。
- 写两个预设类：
.btn-gradient-blue和.btn-gradient-purple，各自定义background-image: linear-gradient(...) - 用 JS 监听
mouseenter/mouseleave切换 class，或用:hover触发@keyframes动画 - 避免在
:hover里直接写background-image: linear-gradient(...)—— 因为background-image本身不可过渡，仍会跳变 - 若用动画，注意
animation-fill-mode: forwards，否则移出后会回退到初始态
最易被忽略的点：伪元素方案里 content: '' 必须存在，否则 ::before 不渲染；而真实渐变切换方案里，两个 linear-gradient() 的色标位置、角度、颜色数量必须严格一致，否则动画过程会扭曲变形——这不是配置问题，是渐变插值机制本身的限制。
