浏览器不支持 background（含 linear-gradient）的 CSS 插值过渡，导致 transition: background 无效；应改用 background-image 单独设置或伪元素 + opacity 方案实现可靠渐变悬停效果。
为什么直接写 transition: background 0.3s 没用
浏览器根本不支持 background（含 linear-gradient()）的 CSS 插值过渡，这不是 Bug，是规范限制。你写的 background: linear-gradient(45deg, #007bff, #00d2ff) 和 background: linear-gradient(45deg, #6f42c1, #0d6efd) 之间无法平滑插值——Chrome、Firefox 都会静默忽略 transition，结果就是硬切，毫无渐变感。
更常见的是：Bootstrap 自带的 .btn-primary:hover 用 background-color: #0056b3 !important 覆盖了你的渐变声明，导致 background-image 根本不渲染。
- 检查开发者工具的 Computed 面板，确认
background-image是否为none - 确保自定义类中显式写了
background-color: transparent !important - 别用
background简写，它会清空background-image，改用background-image单独设置
background-image + opacity 伪元素叠加才是真可靠方案
不依赖渐变插值，而是用半透明层叠加在原按钮上，靠 opacity 过渡模拟“亮化/加深”效果。这个方案完全兼容 Bootstrap 的 :focus、:active、:disabled，也不破坏语义和可访问性。
关键点：
-
::before必须有content: ''，否则不渲染 - 父容器需加
position: relative和overflow: hidden，防止伪元素溢出边框 - 过渡只写
transition: opacity 0.3s ease，浏览器原生支持，无亚像素模糊 - 浅色背景用
rgba(255,255,255,0.2)，深色背景换rgba(0,0,0,0.1)
.btn-gradient-hover {
position: relative;
overflow: hidden;
}
.btn-gradient-hover::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(45deg, rgba(255,255,255,0.2), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.btn-gradient-hover:hover::before {
opacity: 1;
}
如果真要切换两个不同渐变色块，必须用 class 切换或 CSS 动画
比如从蓝紫渐变切换到青橙渐变，transition 不是正确工具。得提前定义两套预设类，再通过 JS 或 :hover 触发 @keyframes。
注意两个致命细节：
- 两个
linear-gradient()的色标数量、角度、位置必须严格一致，否则动画过程会扭曲变形 - 用
@keyframes时必须加animation-fill-mode: forwards，否则移出后回退到初始态 - JS 切换 class 更可控，但别在
click里直接操作style.backgroundImage，容易卡住
移动端点击反馈不能只靠 :hover
iOS Safari 和多数安卓 WebView 中，:hover 只在点击瞬间触发，松手后不恢复，按钮会“卡在悬停态”。纯 CSS 无法解决。
必须补两层逻辑：
- 加
:active规则，例如.btn-gradient-hover:active { transform: scale(0.95); } - 安卓端加
-webkit-tap-highlight-color: rgba(0,0,0,0.1)，避免系统高亮遮盖渐变 - 别同时写
:hover和:active缩放，否则触屏用户点一下就卡住
content: '' 缺失会导致整个效果失效；而渐变切换方案里，哪怕只是色标位置差 1%，动画过程就会出现不可控的拉伸或撕裂——这不是配置问题，是渐变插值机制本身的硬约束。 
