transition: background-color 是唯一可靠起点，必须显式声明初始色（如transparent）、仅改background-color、用0.25s ease-in-out，避父级transform/opacity干扰。
transition: background-color 是唯一可靠起点
直接写 transition: background 0.3s 几乎必然失效——background 是简写属性，浏览器无法对含 linear-gradient() 或多层值的声明做插值。真正能稳定过渡的只有 background-color，且它只接受纯色（十六进制、rgb、hsl 等）。
必须确保两点：默认状态显式声明 background-color（哪怕写 transparent），hover 状态也只改 background-color，不碰 background-image 或整个 background。
- 错误写法：
button { background: #4a6fa5; transition: background 0.3s; }→ 初始background覆盖了颜色通道，后续 hover 中的background-color可能被忽略 - 正确写法：
button { background-color: #4a6fa5; transition: background-color 0.25s ease-in-out; } - 缓动函数别省略：
ease-in-out比默认ease更柔和，linear显得生硬，尤其在短时长下
用伪元素模拟渐变感，绕过 background-image 过渡限制
CSS 原生对 background-image 的过渡支持极差：Chrome/Firefox 近年才实验性支持，Safari 直到 16.4 才有限放开，且行为不稳定。想“看起来像渐变”，又保持平滑，唯一成熟方案是分层。
核心思路：主层用 background-color 过渡，伪元素 ::before 叠加一层带透明度的纯色或微弱渐变，不参与过渡，仅提供视觉层次。
- 主按钮设
position: relative和基础色 -
::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过渡兼容性更好） - 不推荐滥用
will-change: background-color—— 它会强制创建新图层，低内存设备反而更卡 - 对 iOS 用户，务必加
cursor: pointer，否则部分 Safari 版本不触发:hover
鼠标快速进出导致颜色卡在中间态？调快退出动画
这不是 bug，是浏览器过渡队列未及时清空。用户连续 hover/unhover，新状态覆盖旧动画，但插值计算没重置，结果停在某个中间色。
- 最简解法：hover 状态用
transition: background-color 0.2s linear，非 hover 状态用transition: background-color 0.12s linear，让退出更快 - 避免
transition: all 0.3s—— 它会让边框、阴影、文字颜色等一并动起来，干扰焦点 - 真要彻底解决，需 JS 监听
transitionend并清理冗余 class，但纯 CSS 场景下优先调参 - 0.25s 是平衡点：短于 0.2s 显得太急，长于 0.4s 在快速操作中易堆积
background-color 是否被简写覆盖，以及父级是否偷偷加了 transform。这两点一错，再调缓动函数也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
