css输入框获得焦点边框亮度跳变怎么办_利用transition-box-shadow平滑变化

输入框焦点边框跳变应通过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，并确保过渡声明位置正确。不复杂但容易忽略。