transition: background-color 实现背景色柔化需注意四点：①transition必须写在默认状态而非:hover中；②仅对纯色background-color生效，渐变需用background属性；③前后颜色格式须统一（如均用RGB）；④避免!important或JS内联样式干扰。
直接用 transition: background-color 就能柔化背景色突变，但要注意几个关键点，否则可能无效。
确保 transition 写在默认状态上
transition 必须定义在元素的常规（非:hover/.active等）样式中，而不是只写在:hover里。浏览器需要知道“从哪开始过渡”。
- ✅ 正确：.btn { background-color: #4a90e2; transition: background-color 0.3s ease; }
.btn:hover { background-color: #357abd; } - ❌ 错误：.btn { background-color: #4a90e2; }
.btn:hover { background-color: #357abd; transition: background-color 0.3s ease; }（hover时才加transition，没用）
检查是否用了不支持过渡的背景写法
background 是复合属性，如果用了渐变、图片或多个值（如 background: linear-gradient(...) #fff），background-color 过渡会失效。
- 只对纯色生效：确保 hover 前后都是单色
background-color值 - 想过渡渐变？得用
background+transition: background 0.3s，但兼容性略差，且需前后渐变结构一致（如都用两色线性，角度相同）
确认颜色值类型一致
浏览器无法在不同格式颜色间平滑插值，比如 #333 → rgb(51, 51, 51) 可能卡顿或跳变。
立即学习“前端免费学习笔记（深入）”；
- 统一用 HEX、RGB 或 HSL 中的一种（推荐 RGB 或 HSL，更利于控制亮度/饱和度变化）
- 例如：.btn { background-color: rgb(74, 144, 226); }
.btn:hover { background-color: rgb(53, 123, 189); }
其他常见干扰项
有时候看着没过渡，其实是被别的样式盖住了：
- 检查是否有
!important覆盖了 transition - 确认没有 JS 直接修改
style.backgroundColor（内联样式优先级高，会绕过 CSS transition） - 移动端注意：部分老安卓 WebView 对
background-color过渡支持弱，可加-webkit-transition兼容
基本上就这些。transition-background-color 不复杂，但容易忽略定义位置和颜色格式的一致性。
