CSS背景颜色过渡_实现鼠标悬停时柔和的色彩切换

css颜色过渡需明确写background-color而非background或color，且:hover中必须设置新颜色值，推荐0.25–0.32s时长与ease缓动函数。

transition 用错属性名，颜色不会动

很多人写 background-color 的过渡效果时，直接在 CSS 里加 transition: background 0.3s 或更糟——写成 transition: color 0.3s，结果悬停没反应。根本原因是：CSS 过渡必须明确指定要动的**具体属性名**，且不能缩写。

• background 是复合属性，浏览器不支持对它做过渡（多数浏览器会静默忽略）
• 必须写成 transition: background-color 0.3s
• 如果同时想过渡边框或文字色，得列全：transition: background-color 0.3s, border-color 0.3s, color 0.3s
• 别漏单位——0.3 不行，得是 0.3s 或 300ms

:hover 里没写新颜色值，过渡就白搭

过渡只是“怎么变”，不是“变成啥”。只在正常状态写 transition，但 :hover 里没改 background-color，那当然没变化。

• 基础结构必须成对出现：.btn { background-color: #4a90e2; transition: background-color 0.3s; } .btn:hover { background-color: #357abd; }
• 颜色值得是可插值的类型：十六进制、rgb()、hsl() 都行；但 transparent 和 currentcolor 在部分老浏览器里过渡可能卡顿
• 避免在 :hover 里用 inherit 或 unset，它们不触发颜色插值

IE11 及更老浏览器根本不认 background-color 过渡

IE10–11 对 background-color 过渡的支持极不稳定：有时闪一下就跳变，有时干脆不动。这不是你代码错，是引擎限制。

• 如果必须兼容 IE11，优先用 opacity 过渡替代（比如盖一层半透色块）
• 或者降级为 js 控制 class 切换 + setTimeout 模拟延迟，避开 CSS 过渡
• chrome/firefox/edge 80+ 和 safari 12.1+ 都没问题，放心用

过渡太快或太慢，用户根本感知不到

0.1s 太快像没动，0.6s 又让人觉得卡。人眼对颜色变化的舒适区间其实很窄。

立即学习“前端免费学习笔记（深入）”；

• 推荐从 0.25s 起手，微调到 0.28s 或 0.32s —— 这个范围既清晰又不拖沓
• 别用 ease-in-out 做颜色过渡，它中间那段匀速太生硬；默认 ease（cubic-bezier(0.25, 0.1, 0.25, 1)）更自然
• 移动端要额外加 will-change: background-color，否则某些安卓 webview 会掉帧

实际生效的关键，永远是那两行：正常态的颜色 + hover 态的颜色 + 中间明确定义的 background-color 过渡。其余都是围绕这三要素打补丁。