background-color过渡最稳，需显式声明transition并统一颜色格式；渐变反转须同步调整角度与色标顺序；iOS需补充:active确保点击反馈；避免transition:all引发意外动画。
background-color 直接过渡最稳，但别漏写 transition
只要按钮背景是纯色，background-color 是最可靠、兼容性最好的悬停变色方式。它能被所有现代浏览器平滑过渡，连 IE10+ 都支持。transition 必须显式声明在默认状态里，否则悬停时颜色会“啪”一下跳变，毫无过渡感。
- 必须写
transition: background-color 0.3s ease;，不能只写transition: 0.3s;（后者不生效） - 初始和悬停状态都得用具体颜色值，比如
#3b82f6→#8b5cf6，别混用命名色（blue）和十六进制，避免解析歧义 - 别在同一个选择器里既设
background-color又设background-image，否则浏览器可能忽略过渡——纯色就老老实实只用background-color
linear-gradient 悬停反转要同步调角度和色标顺序
用渐变做背景时，光改 to right → to left 不一定看得出变化；真正“反转”的效果，得让起始色和结束色位置对调，同时角度取反。
- 初始写
background: linear-gradient(90deg, #3a7bd5, #00d2d3);，悬停就得写background: linear-gradient(-90deg, #00d2d3, #3a7bd5);—— 角度和色标都动 -
transition必须作用于background（不是background-image），因为后者不可插值；写成transition: background 0.3s;才有效 - 别在初始状态用
background-color、悬停用background: linear-gradient(...)，这种混合写法会中断过渡动画
:hover 在 iOS Safari 上经常不触发，:active 得补上
iPhone 用户第一次打开页面没点过任何地方时，:hover 基本失效——这不是 bug，是 Safari 的交互策略。单靠 :hover 的按钮，在真机上点不动、没反馈。
- 必须加
.btn:active规则，哪怕只是把背景色再压深一点，也能保证点击瞬间有响应 - 推荐写法：
.btn:hover, .btn:active { background-color: #1e40af; }，把两者合并声明，省代码也保覆盖 - 别依赖
:hover做关键功能提示（比如显示 tooltip），移动端用户根本看不到；需要时用 JavaScript 监听touchstart替代
transition: all 容易埋坑，建议按需锁定属性
写 transition: all 0.3s; 看似省事，但一旦后续加了 border、box-shadow 或 transform，这些属性也会跟着动，可能引发意外抖动或性能掉帧。
立即学习“前端免费学习笔记（深入）”；
- 明确只动背景色就写
transition: background-color 0.3s ease; - 如果还加了缩放，就写
transition: background-color 0.3s ease, transform 0.2s ease; - 慎用
ease-in-out：它开头慢、结尾慢，实际体验不如ease自然；多数场景ease或cubic-bezier(0.4, 0, 0.2, 1)更顺
linear-gradient 里两个颜色的位置一换，视觉效果才真正“翻过来”。iOS 上没补 :active 的按钮，真机测试第一眼就会露馅。 
