为实现背景色平滑过渡，需在默认样式中设置transition: background-color 0.3s ease;，并确保颜色值使用十六进制、RGB或HSL等可插值格式，避免transparent或命名色及transition: all。
直接修改 background-color 时颜色瞬间切换，是因为 css 默认没有过渡动画。只需添加 transition 属性，就能让背景色平滑变化。
正确写法：给 transition 加上 background-color 和持续时间
在需要渐变的元素上，同时设置 background-color 和 transition：
- transition 必须写在「初始状态」（比如 :hover 前的默认样式）里，不能只写在 :hover 中
- 推荐写法：transition: background-color 0.3s ease;
- 避免只写 transition: all 0.3s; —— 这会触发所有属性过渡，可能影响性能或造成意外动画
确保颜色值可被浏览器插值（支持渐变的关键）
不是所有颜色写法都能平滑过渡。以下写法支持过渡：
- 十六进制：#3498db → #e74c3c
- RGB / RGBA：rgb(52, 152, 219) → rgba(231, 76, 60, 0.9)
- HSL / HSLA（更利于控制明度/饱和度变化）：hsl(204, 66%, 52%) → hsl(357, 76%, 56%)
⚠️ 注意：transparent 和 named colors（如 red、blue）在部分旧浏览器中过渡可能不自然，建议统一用十六进制或 RGB。
立即学习“前端免费学习笔记（深入）”；
常见失效原因与修复
- hover 状态没生效？ 检查是否遗漏了 :hover 选择器，或父元素阻止了事件（如 pointer-events: none）
- 颜色没变？ 确保 hover 后的 background-color 值确实不同（比如写了相同的颜色或 inherit）
- 过渡卡顿？ 避免在过渡期间频繁修改 background-color（例如 js 循环赋值），也别在 transform 或 opacity 外强行触发重排
进阶技巧：配合其他属性增强体验
单靠背景色过渡有时单调，可叠加微调提升质感：
- 加一点 box-shadow: 0 2px 6px rgba(0,0,0,0.1); 并一起过渡，增强立体感
- 搭配 color 和 border-color 一起过渡，保持视觉协调
- 用 ease-in-out 替代默认 ease，让起止更柔和