聚焦效果需三步：基础状态设outline: none和transition（如border-color 0.2s ease, box-shadow 0.2s ease），:focus中改border-color和box-shadow，颜色与模糊值需协调；移动端需兼容触控与WebView，失焦状态须可逆。
聚焦时边框变色 + 阴影 + 平滑过渡，三步就能生效，但漏掉 transition 或写错作用属性，效果就完全不出现。
input:focus 里必须配 transition 才有动画
只写 :focus 样式（比如改 border-color 或加 box-shadow）不会产生“过渡”效果，它只是瞬间切换。要让变化平滑，得显式声明哪些属性参与过渡、持续多久、用什么缓动函数。
-
transition必须写在非:focus的基础状态上（即普通input规则里），不能只写在:focus里 - 推荐写法：
transition: border-color 0.2s ease, box-shadow 0.2s ease;—— 只对实际变化的属性设过渡，避免影响性能 - 别用
transition: all 0.2s;，它会把outline、background等隐式变化也纳入，容易引发意外闪烁或卡顿
outline: none 不是可选项，而是必要清理项
Chrome/Firefox 默认会给聚焦的 input 加一圈蓝色或黄色 outline，它和你自定义的 box-shadow 叠在一起，视觉混乱，还可能遮挡阴影边缘。
- 必须在基础样式中写
outline: none;，否则:focus下的阴影看起来“毛边”或偏移 - 如果要考虑无障碍访问（如键盘 Tab 导航），建议用
outline替代方案：比如加更粗的border或高对比度box-shadow，而不是彻底移除焦点提示 - 千万别只在
:focus里写outline: none—— 这会导致非聚焦态 outline 仍存在，切换时仍有原生轮廓闪一下
box-shadow 模糊半径和透明度要配合 border-color 使用
单靠改边框颜色不够突出，box-shadow 是增强聚焦感知的关键，但参数稍不协调就会显得廉价或发虚。
立即学习“前端免费学习笔记（深入）”；
-
box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);中的4px是模糊值，超过6px在小尺寸输入框上易晕开；低于2px则几乎看不出效果 -
rgba()的 alpha 值建议控制在0.3–0.6之间：太透（如0.1）看不见，太实（如0.9）像描边，失去“光晕感” - 注意颜色要和
border-color一致，否则聚焦时边框和阴影会“脱节”——比如边框用#3b82f6，阴影却用#1d4ed8，肉眼明显能察觉色差
移动端 focus 效果常被忽略的两个事实
iOS Safari 和 Android Chrome 对 :focus 的触发逻辑和桌面不同，尤其在软键盘唤起后，容易失效或延迟。
- 部分安卓 WebView 不响应
:focus，需加input:focus { outline: none; }+ontouchstart=""空事件强制激活伪类（仅当必须支持老旧 WebView 时才用） - iOS 上，如果
input外层有transform或will-change，有时会阻断焦点样式渲染，临时去掉这些 CSS 可验证是否为此原因 - 真正可靠的聚焦反馈，在移动端建议叠加
:active+ JavaScript 监听focusin事件做 class 切换，而不是只依赖纯 CSS
最易被忽略的是：过渡效果是否在表单提交后重置。用户填完再点别处，输入框失焦，但若没正确回退到初始 border-color 和 box-shadow，视觉状态就滞留了——这需要确保基础样式和 :focus 样式是成对、可逆的，不能只顾“进来”，不管“出去”。
