input:focus没反应主因是样式被高权重规则覆盖或未清除outline；应使用两层rgba box-shadow模拟光晕，并优先用:focus-visible兼容移动端。
input:focus 为什么没反应？检查是否被其他样式覆盖
最常见的原因是 :focus 样式被更具体的 CSS 规则干掉了，比如 input[type="text"] 或带 class 的选择器权重更高；或者写了 :focus 却忘了加 outline: none，导致浏览器默认焦点框和你写的 box-shadow 叠在一起，看起来不明显。
- 用浏览器开发者工具检查元素，看
:focus对应的样式是否被 strike-through（划掉） - 确保规则顺序合理：把
input:focus放在通用input声明之后，或直接提高选择器权重，例如写成input:focus, textarea:focus - 必须显式清除原生焦点轮廓：
outline: none，否则光晕会被压住或显得杂乱
box-shadow 实现光晕的关键参数组合
光晕本质是扩散、模糊、低饱和度的阴影。单层 box-shadow 容易发虚或偏色，推荐用两层叠加模拟真实发光感：
- 内层：小偏移 + 中等模糊 + 高透明度，贴近边框，增强“亮边”感 ——
0 0 4px 2px rgba(0,120,255,0.3) - 外层：零偏移 + 大模糊 + 更低透明度，形成柔和弥散 ——
0 0 16px rgba(0,120,255,0.15) - 避免用纯色如
rgb(0,120,255)，务必用rgba()控制透明度，否则在深色背景上会突兀
完整声明示例：input:focus { outline: none; box-shadow: 0 0 4px 2px rgba(0,120,255,0.3), 0 0 16px rgba(0,120,255,0.15); }
移动端 Safari 不触发 :focus？改用 :focus-visible 更稳妥
iOS Safari 在点击输入框时可能不触发 :focus（尤其配合虚拟键盘弹出逻辑），而 :focus-visible 是专为“明确由键盘或辅助技术聚焦”设计的现代伪类，兼容性已覆盖 iOS 15.4+ 和主流安卓浏览器。
- 对鼠标/触屏用户，
:focus-visible默认不生效，需搭配:focus回退：input:focus, input:focus-visible - 如果只想要键盘用户的光晕（避免触屏误触发），可单独用
input:focus-visible，但要测试是否影响可访问性 - 旧版 Safari 需加
-webkit-focus-ring-color作为兜底，但不推荐依赖它做光晕
光晕太刺眼或加载卡顿？注意性能与感知细节
box-shadow 本身不触发重排，但过度模糊（如 100px）会让合成层变大，低端设备可能出现掉帧；同时，人眼对蓝紫色光晕更敏感，容易造成视觉疲劳。
- 模糊值建议控制在
4px–24px区间，超过32px就难看出差异，反而增加渲染压力 - 别用
inset模式做光晕，那是往里描边，不是外围发光 - 如果输入框有圆角（
border-radius），光晕会自然跟随，但border-radius值过小（如1px）会导致光晕边缘锯齿，建议 ≥4px
真正难调的是颜色和透明度的平衡——同一组 box-shadow 在白色背景和深灰背景上效果天差地别，得实机多测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
