background-color 是唯一能稳定过渡的背景属性，必须显式声明初始值、只改颜色、transition 写在常态样式里；hover 背景色不平滑的三大原因是 transition 写在 :hover 中、用 background 简写覆盖、初始未设 background-color。
background-color 是唯一能稳定过渡的背景属性，必须显式声明初始值、只改颜色、配 transition 写在常态样式里——否则就是突变。
为什么 hover 背景色不平滑？常见错误就这三类
不是浏览器不支持，而是写法踩了坑：
-
transition写在:hover里 → 浏览器只对“进入 hover”做动画，“收回”时直接跳变 - 用
background简写替代background-color→ 比如background: #fff url(img.png)，后续background-color: #000在 hover 中会被忽略 - 初始状态没设
background-color→ 元素靠继承或默认值渲染，浏览器无法确定“从哪开始过渡”
transition 必须写在非 hover 的基础样式中
这是最常被忽略的硬性规则。浏览器需要知道“起始状态是什么”，才能插值计算中间帧。
正确写法示例：
.btn {
background-color: #4a6fa5;
transition: background-color 0.25s ease-in-out;
}
.btn:hover {
background-color: #1a3a6a;
}
错误写法（无效）：
.btn {
background-color: #4a6fa5;
}
.btn:hover {
background-color: #1a3a6a;
transition: background-color 0.25s ease-in-out; /* ❌ 不生效 */
}
用 background-image 时怎么过渡？别硬刚
原生 background-image 过渡基本不可靠：Safari 直到 16.4 才有限放开，Chrome/Firefox 行为也不一致。想“看起来像渐变过渡”，得绕开它。
- 主层只用
background-color过渡（纯色） - 伪元素
::before叠一层带透明度的微弱渐变，不加 transition - 避免给伪元素加
transition，iOS Safari 容易卡顿或跳帧
结构示意：
.card {
position: relative;
background-color: #f8f9fa;
}
.card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
z-index: 1;
}
.card:hover {
background-color: #e9ecef; /* ✅ 只动这一行 */
}
移动端和可访问性不能只靠 hover
iOS Safari 默认不触发 :hover，这不是 bug，是规范行为；屏幕阅读器也不会感知纯 :hover 变化。
- 关键交互别依赖 hover，比如“悬停显示菜单” → 改用
:focus或 JS 控制显隐 - 若必须用，加
tabindex="0"让键盘用户也能聚焦触发 - 兼容性兜底可写：
@media (hover: hover) { .item:hover { ... } }
真正难的不是写几行 CSS，而是判断什么时候该放弃 background-image 过渡、什么时候该换交互方式——这些边界比语法本身更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
