CSS不支持background-image（含linear-gradient）的过渡动画，因其无中间状态可插值；可靠方案是伪元素叠加+opacity动画，兼容性好且不破坏交互逻辑。
直接给 .btn 加 transition: background 0.3s 和 background: linear-gradient() 不会动——CSS 不支持渐变背景的插值过渡，浏览器会直接跳变。
为什么 background-color 过渡不了渐变色
渐变是 background-image 的一种，而 background-color 只能过渡纯色。你写 transition: background，浏览器尝试对整个 background 属性做插值，但 linear-gradient() 没有“中间状态”可计算：起点和终点的色标、角度、位置稍有差异，就会导致跳变或渲染异常。
- Chrome/Firefox 明确不支持
background（含渐变）的过渡动画 - 即使个别版本“看起来动了”，也是不可控的插值行为，比如角度乱跳、色标错位
-
.btn默认用background-color+!important，你写的background: linear-gradient()很可能被覆盖失效
真正能平滑过渡的方案：伪元素叠加 + opacity
不碰 background，而是用半透明层盖在原按钮上，靠 opacity 动画制造“亮化/加深”的渐变感。它兼容所有现代浏览器，不破坏 :focus、:active 等原生交互逻辑。
- 给按钮加自定义类，如
.btn-gradient-hover - 确保按钮本身有明确底色（比如用
bg-primary或显式设background-color） - 伪元素
::before使用background-image: linear-gradient()，初始opacity: 0，hover 时升到1 - 必须设
position: relative和overflow: hidden，防止伪元素溢出圆角
.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.3), transparent);
opacity: 0;
transition: opacity 0.25s ease;
}
.btn-gradient-hover:hover::before {
opacity: 1;
}
如果非要换渐变色块，就得放弃 transition 插值
比如从蓝紫渐变切到红橙渐变，这不是“过渡”，而是“切换”。这时应避免依赖 transition: background，改用 class 切换 + CSS 动画或 JS 控制。
- 定义两套渐变类：
.grad-blue和.grad-red，各自含完整的background-image和background-color: transparent !important - 用
classList.toggle()切换，配合@keyframes做淡入淡出或位移动画 - 别在
:hover里写background: linear-gradient()—— 它只会闪一下，不是动画 - 移动端无
:hover，这种切换必须搭配:active或点击事件才有效
容易被忽略的细节：权重、深色模式与文字可读性
写了样式却没生效？大概率卡在选择器权重或系统偏好上。
- Bootstrap 的
.btn-primary:hover权重极高，你的.btn:hover规则几乎无效；必须用.btn.btn-primary.btn-gradient-hover:hover或更具体的选择器 - 深色模式下，浅色渐变（如
rgba(255,255,255,0.2)）可能完全看不见，需配合@media (prefers-color-scheme: dark)调整叠加层颜色 - 伪元素叠加后，按钮文字对比度可能下降，尤其浅底色配浅叠加层——别只看设计稿，真机测 Dark Mode 下的 WCAG AA 标准
最麻烦的从来不是写几行 CSS，而是让渐变“看起来在动”，同时不崩布局、不丢焦点、不糊文字、不踩中移动端的 hover 陷阱。
