为表单输入框添加平滑聚焦动画，需将 transition 声明在默认状态而非 :focus 中，并显式指定 border-color 和 box-shadow 等变化属性，避免使用 all；推荐 border 设为 solid transparent 初始态，box-shadow 用 0 0 0 0 transparent 起始值以确保兼容性。
给表单输入框的 border 和 box-shadow 添加 transition 是解决聚焦时样式突变最直接有效的方法。关键在于过渡属性要写在非聚焦态（即默认状态）上，并确保所有参与变化的属性都被明确声明。
过渡必须写在默认状态，而非 :focus 里
很多人误把 transition 写在 :focus 选择器中，这会导致获得焦点时有动画，但失去焦点时立刻跳变。正确做法是把过渡声明放在基础输入框样式里：
-
✅ 正确：
input { border: 1px solid #ccc; transition: border-color 0.2s ease, box-shadow 0.2s ease; } -
❌ 错误：
input:focus { transition: ... }（失去焦点无过渡）
明确列出所有会变化的属性
如果只写 transition: all 0.2s，可能意外触发其他属性（如 width、background）的过渡，影响性能或行为。推荐显式声明：
- 边框颜色变化 → 写
border-color - 阴影出现/消失 → 写
box-shadow - 若同时改边框宽度（如
border: 2px solid blue），需写border-width和border-color，或简写为border
注意 border-style 和 border-width 的兼容性
如果聚焦时改变了 border-style（比如从 none 到 solid）或 border-width（如 1px → 2px），部分浏览器对这些属性的过渡支持不一致。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 保持
border-style始终为solid（默认态用透明色：border: 1px solid transparent） - 只通过
border-color控制“是否可见”，避免样式切换 - 示例：
input { border: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; } input:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,.25); }
box-shadow 过渡需注意“从无到有”的起始值
box-shadow: none 和具体阴影值之间可以平滑过渡，但建议统一用 0 0 0 0 transparent 作为初始值，更可控：
input { box-shadow: 0 0 0 0 transparent; transition: box-shadow 0.2s ease; }input:focus { box-shadow: 0 0 0 3px rgba(0,123,255,.25); }- 这样避免
none在某些旧浏览器中导致过渡失效
