:focus 发光失效需排查三类场景：outline 覆盖需用 outline: none + 替代 box-shadow；父容器 overflow: hidden 会裁剪阴影；移动端需处理 ios 默认聚焦样式、安卓快速失焦及高 dpr 屏多层阴影。
直接用 input:focus + box-shadow 就能实现，但必须处理 outline 覆盖、父容器裁剪、移动端失焦这三类失效场景，否则在真实项目里大概率“写了却看不见”。
input:focus 不生效？先查 outline 和 overflow
Chrome、Edge 默认的蓝色 outline 会压住你写的 box-shadow，不是 CSS 没加载，是它根本没机会显示。
- 必须加
outline: none或outline: 0显式移除原生焦点环 - 但不能只删不补：键盘用户依赖视觉反馈，得用
box-shadow: 0 0 0 2px rgba(0,123,255,.25)替代 - 如果父容器设了
overflow: hidden，box-shadow的模糊区域会被直接裁掉——临时加outline: 1px solid red看发光是否被截断 - 某些重置样式（如
appearance: none）会连带清掉outline和border，检查 computed styles 确认outline是否为none且未被其他规则覆盖
移动端 focus 发光一闪就消失？iOS 和安卓处理逻辑不同
iOS Safari 默认给聚焦 input 加一层半透明灰色背景，会盖住你的发光；安卓 Chrome 则可能因快速失焦（比如表单自动提交）导致阴影几乎不可见。
- iOS 必须加
-webkit-appearance: none去掉默认聚焦样式，但要同步补全border和background，否则输入框“变透明” - 安卓端若点击后立刻失焦，可加
transition: box-shadow 0.2s ease延长动画时间，让光效可感知 - 禁用
user-select: none—— 它会导致:focus在部分 WebView 中完全不触发 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，否则缩放会破坏焦点事件链
大屏或高 DPR 设备上发光太弱？单层 box-shadow 不够用
在 4K 屏或 Retina 屏上，box-shadow: 0 0 12px rgba(0,123,255,.6) 看起来只是灰边，不是光。这是因为单层模糊在高分辨率下被拉伸失真。
- 必须用逗号分隔的多层
box-shadow，至少三层，模糊半径递增：0 0 4px rgba(..., .7), 0 0 12px rgba(..., .4), 0 0 28px rgba(..., .15) - 所有层的
offset-x和offset-y必须为0，否则光晕不对称 - 避免写成多个独立的
box-shadow:声明，后声明会覆盖前声明 - iOS 辅助功能「降低透明度」开启时，所有半透明阴影都会被剥离——真机调试前先关掉这个开关
真正难的不是写对那行 box-shadow，而是排查它为什么没出现在屏幕上：父容器的 overflow、系统级辅助设置、DPR 渲染精度、甚至用户刚从地址栏切回页面导致 focus 事件未触发……这些细节不逐个验证，再漂亮的参数也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
