只能用 background-color 做过渡，因为它是唯一能稳定插值的属性；transition 必须写在默认状态，指定 background-color 0.25s ease-in-out，hover 仅改颜色值，避免简写 background、混用颜色格式及父级 transform/opacity 干扰。
只能用 background-color 做过渡，其他写法基本都会跳变或失效。
为什么 transition: background 几乎总失败
因为 background 是简写属性，浏览器无法对包含 linear-gradient()、url() 或多层值的声明做插值。哪怕初始是纯色、hover 换成渐变，也会直接跳变——它不是“颜色在变”，而是整个背景声明被替换。
- 错误写法：
button { background: #4a6fa5; transition: background 0.3s; }→ hover 里再写background: linear-gradient(...)，必然跳变 - 正确前提：初始和 hover 都只动
background-color，且都用纯色（#fff、rgb(0,0,0)、hsl(0,0%,100%)） - 别混用格式：hover 时从
hsl()切到#000，部分旧版 Safari 会丢帧
transition 必须写在默认状态，不是 :hover
写在 :hover 里，鼠标移入有动画、移出直接闪回——因为移出时没有 transition 规则接管。
- 必须这样：
button { background-color: #4a6fa5; transition: background-color 0.25s ease-in-out; } - 然后：
button:hover { background-color: #2c5a8c; } - 缓动函数别省略：
ease-in-out比默认ease更柔和，linear在短时长下显生硬 - 时间单位写全：
0.25s，不写.25s或250ms（后者合法但易读性差）
想“看起来像渐变”？用伪元素分层模拟
真渐变过渡兼容性差（Safari 直到 16.4 才有限支持，Firefox 仍不支持），但人眼感知的“渐变感”可以用 ::before 叠加一层固定透明渐变来伪造。
- 主层设
position: relative和基础background-color -
::before绝对定位铺满，z-index: 1，背景用linear-gradient(135deg, rgba(255,255,255,0.15), transparent) - hover 时只改主层
background-color，伪元素不动 —— 视觉上就是“底色在变深/变亮” - 千万别给伪元素加
transition，iOS Safari 容易卡顿或跳帧
移动端 hover 失效？先查父级 transform 和 opacity
iOS Safari（尤其 14 及更早）有个隐藏限制：如果按钮父容器有 transform（如 translateZ(0)）、opacity（哪怕 0.99）或 filter，子元素的 background-color 过渡可能被静默禁用。
- 快速验证：临时移除父级这些样式，看 hover 是否恢复
- 替代方案：把
transition上提到父容器；或改用box-shadow: inset 0 0 0 100px #xxx模拟填充（box-shadow过渡兼容性更好） - 务必加
cursor: pointer，否则部分 Safari 版本不触发:hover
真正难的不是写对那行 transition，而是意识到浏览器根本不会帮你“猜”怎么插值两个完全不同的背景声明——它只老老实实过渡可动画属性，而目前最稳的，就只有 background-color 这一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
