input:focus时background-color不生效主因是浏览器默认样式覆盖、伪类优先级错误或transition未精确声明；需用input:focus显式设置、清除outline、确保初始背景色非transparent，并写transition:background-color 0.3s。
input:focus 时 background-color 不生效的常见原因
直接给 input 设置 background-color 和 transition，但聚焦后颜色没变——大概率是浏览器默认样式或伪类优先级问题。Chrome/Firefox 会给 input 加上原生 focus outline 或背景高亮（尤其在某些 OS 主题下），覆盖了你的 CSS；另外，:focus 选择器若没写对（比如漏了 input:focus 写成 .input:focus 但 class 并不存在），也会失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
input:focus显式声明，避免被用户代理样式（user agent stylesheet）压制 - 加
outline: none防止原生蓝色边框干扰视觉判断 - 确保初始状态有明确的
background-color（不能是transparent或继承值，否则过渡无起点） - 检查是否被更高优先级规则（如
!important或内联 style）覆盖
transition 属性必须匹配 background-color 的写法
transition 不会自动“猜”你要动哪个属性。如果只写了 transition: all 0.3s，看似万能，但实际可能因浏览器重绘策略导致闪烁或不触发；更稳妥的是**精确声明**。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
transition: background-color 0.3s ease，不带all - 避免在
transition中混用简写（如transition: 0.3s），它等价于transition-property: all，不可靠 - 如果同时想动边框或文字颜色，分开写：
transition: background-color 0.3s, border-color 0.3s, color 0.3s - 注意单位：时间必须带
s或ms，0.3无效，0.3s才合法
input 背景渐变需要 background-image 还是 background-color？
纯色渐变用 background-color 就够了；但如果你说的“渐变”是指线性/径向渐变（比如从蓝到紫），那必须用 background-image: linear-gradient(...) ——background-color 只支持单色，不支持渐变函数。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 要真渐变：用
background-image，并为transition指定background-image（现代浏览器支持，但 Safari 旧版有兼容问题） - 退而求其次：用两个相近单色做
background-color过渡，视觉上模拟“柔和变化”，更稳 - 若坚持用
background-image过渡，务必测试 Safari；可加-webkit-transition: background-image 0.3s兼容 - 不要试图用
background简写过渡，它会重置所有子属性，容易出错
移动端 focus 触发时机和兼容性坑
iOS Safari 默认会在 input 聚焦时放大页面、弹出键盘，并可能强制重绘背景，导致 transition 被跳过或延迟执行。Android 各厂商 WebView 表现也不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
input加cursor: text，避免部分 Android 机型聚焦时背景变灰 - 避免在
:focus中同时修改height或padding，这会触发 layout，打断 transition - 测试真机：模拟器常表现正常，但 iOS 上
transition对background-image支持较弱，优先用background-color - 如果必须渐变且要兼容，考虑用 JS 监听
focus/blur，动态切换 class 控制背景图
真正难的不是写那几行 CSS，而是得确认目标浏览器是否把 background-image 当作可过渡属性，以及用户手指点下去那一刻，系统有没有偷偷插手重绘逻辑。
