输入框焦点边框跳变应通过box-shadow过渡解决：默认用box-shadow模拟细边框，focus时增强阴影，transition声明在基础选择器上且仅作用于box-shadow，禁用outline以实现平滑高亮。
输入框获得焦点时边框亮度突然跳变，本质是 box-shadow 或 border 的颜色/宽度在 focus 状态下突变，而没加过渡动画。用 transition 控制 box-shadow（而非 border）是最稳妥的平滑方案——因为 box-shadow 支持颜色、模糊度、偏移量等属性的渐变，border-color 虽也支持，但部分浏览器对 border-width 过渡支持不佳，容易卡顿或失效。
只对 box-shadow 做 transition，别碰 border
把视觉“高亮”效果完全交给 box-shadow，而不是靠改变 border 颜色或粗细。这样既能避免 Safari/旧 Edge 对 border 过渡的兼容问题，又能实现更柔和的光晕扩散感。
- 默认状态：用
box-shadow: 0 0 0 1px #d1d5db模拟细边框（不设 border） - focus 状态：提升阴影强度和色相，如
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 0 0 4px #3b82f6 - CSS 中统一声明：
transition: box-shadow 0.2s ease-in-out;
确保 transition 写在非 :focus 规则里
transition 必须写在基础选择器（如 input[type="text"]）上，不能只写在 :focus 里，否则失去“离开焦点时的收尾动画”，导致失焦也跳变。
- ✅ 正确：
input { transition: box-shadow 0.2s; }+input:focus { box-shadow: ...; } - ❌ 错误：
input:focus { transition: box-shadow 0.2s; box-shadow: ...; }（失焦无过渡）
慎用 outline，优先用 box-shadow 实现焦点环
原生 outline 默认有延迟、样式难控，且无法用 transition 平滑变化。禁用它，改用 box-shadow 模拟可定制的焦点环：
立即学习“前端免费学习笔记（深入）”；
- 加
outline: none;消除默认 outline - 用双层 box-shadow 实现内发光+外描边效果，例如：
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 3px rgba(59, 130, 246, 0.1); - focus 时增强第二层：如
0 0 0 4px rgba(59, 130, 246, 0.3)
基本上就这些。关键不是“加 transition”，而是把焦点反馈逻辑从 border 转移到 box-shadow，并确保过渡声明位置正确。不复杂但容易忽略。
