如何用CSS transition实现背景颜色平滑切换

只能用 background-color 做过渡，因为它是唯一能稳定插值的属性；transition 必须写在默认状态，指定 background-color 0.25s ease-in-out，hover 仅改颜色值，避免简写 background、混用颜色格式及父级 transform/opacity 干扰。

只能用 background-color 做过渡，其他写法基本都会跳变或失效。

为什么 transition: background 几乎总失败

因为 background 是简写属性，浏览器无法对包含 linear-gradient()、url() 或多层值的声明做插值。哪怕初始是纯色、hover 换成渐变，也会直接跳变——它不是“颜色在变”，而是整个背景声明被替换。

1. 错误写法：button { background: #4a6fa5; transition: background 0.3s; } → hover 里再写 background: linear-gradient(...)，必然跳变
2. 正确前提：初始和 hover 都只动 background-color，且都用纯色（#fff、rgb(0,0,0)、hsl(0,0%,100%)）
3. 别混用格式：hover 时从 hsl() 切到 #000，部分旧版 Safari 会丢帧

transition 必须写在默认状态，不是 :hover

写在 :hover 里，鼠标移入有动画、移出直接闪回——因为移出时没有 transition 规则接管。

1. 必须这样：button { background-color: #4a6fa5; transition: background-color 0.25s ease-in-out; }
2. 然后：button:hover { background-color: #2c5a8c; }
3. 缓动函数别省略：ease-in-out 比默认 ease 更柔和，linear 在短时长下显生硬
4. 时间单位写全：0.25s，不写 .25s 或 250ms（后者合法但易读性差）

想“看起来像渐变”？用伪元素分层模拟

真渐变过渡兼容性差（Safari 直到 16.4 才有限支持，Firefox 仍不支持），但人眼感知的“渐变感”可以用 ::before 叠加一层固定透明渐变来伪造。

1. 主层设 position: relative 和基础 background-color
2. ::before 绝对定位铺满，z-index: 1，背景用 linear-gradient(135deg, rgba(255,255,255,0.15), transparent)
3. hover 时只改主层 background-color，伪元素不动 —— 视觉上就是“底色在变深/变亮”
4. 千万别给伪元素加 transition，iOS Safari 容易卡顿或跳帧

移动端 hover 失效？先查父级 transform 和 opacity

iOS Safari（尤其 14 及更早）有个隐藏限制：如果按钮父容器有 transform（如 translateZ(0)）、opacity（哪怕 0.99）或 filter，子元素的 background-color 过渡可能被静默禁用。

1. 快速验证：临时移除父级这些样式，看 hover 是否恢复
2. 替代方案：把 transition 上提到父容器；或改用 box-shadow: inset 0 0 0 100px #xxx 模拟填充（box-shadow 过渡兼容性更好）
3. 务必加 cursor: pointer，否则部分 Safari 版本不触发 :hover

真正难的不是写对那行 transition，而是意识到浏览器根本不会帮你“猜”怎么插值两个完全不同的背景声明——它只老老实实过渡可动画属性，而目前最稳的，就只有 background-color 这一个。