直接用 background 在纯色和渐变间切换会失败，因为纯色与 linear-gradient() 类型不同，浏览器无法插值；需统一改写为结构一致的 linear-gradient(rgb(), rgb()) 才能实现平滑过渡。
为什么直接用 background 在纯色和渐变间切换会失败
因为 CSS 中纯色（如 #fff、rgb(255, 255, 255)）和 linear-gradient() 是完全不同的值类型，浏览器无法在它们之间做平滑过渡。即使你写了 transition: background 0.3s，切换时也会立刻跳变，没有中间状态。
用 rgb() 模拟“可过渡的渐变起点”
核心思路：把纯色也写成 linear-gradient()，且只用一个颜色停靠点，这样它和多色渐变就属于同一函数类型，CSS 才能逐帧插值。关键在于统一函数签名，而不是颜色本身。
- 纯白背景 → 改写为
background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)) - 蓝到紫渐变 →
background: linear-gradient(rgb(59, 130, 246), rgb(139, 92, 246)) - 必须保证两个
linear-gradient()的参数结构一致（同为 2 色、同为 2 个rgb()值），否则 transition 仍会失效
linear-gradient() 中 rgb 值不支持百分比过渡？别信
很多人误以为 rgb() 不能参与 transition，其实是误解 —— 真正限制在于：只有当两个背景声明都使用 linear-gradient()，且内部颜色格式一致（都用 rgb() 或都用 hsl()），浏览器才对每个颜色通道单独插值。如果你混用 #fff 和 rgb(255,255,255)，或者一个用 rgb、另一个用 hsl，transition 就会退化为立即切换。
- ✅ 可过渡：
linear-gradient(rgb(255,0,0), rgb(0,0,255))↔linear-gradient(rgb(255,255,0), rgb(0,255,0)) - ❌ 不过渡：
linear-gradient(#ff0, #0f0)↔linear-gradient(rgb(255,255,0), rgb(0,255,0)) - ⚠️ 注意：alpha 通道要显式写全，比如
rgba(255,0,0,1)，避免从rgb()切到rgba()导致类型不匹配
实际切换时容易漏掉的兼容性细节
某些旧版 Safari（linear-gradient() 的 transition 支持不稳定，尤其在 hover 或 class 切换中。稳妥做法是加一层降级 fallback，并确保起始/结束状态都带 background-color。
立即学习“前端免费学习笔记（深入）”；
- 给元素同时设
background-color: rgb(255,255,255)和background-image: linear-gradient(...)，前者作为兜底纯色 - transition 写在
background简写属性上时，务必确认两个状态都用了完整linear-gradient()，不要一个用background-image、另一个用background - 如果用 JS 动态切换，避免直接改
element.style.background，改 class 更可靠，防止内联样式优先级干扰
