:focus没反应是因默认outline遮盖box-shadow，需设outline:0或outline:2px solid transparent+outline-offset:2px；box-shadow应为0 0 模糊半径 扩散半径 rgba(0,120,255,0.3)；移动端要检查tabindex和user-select。
直接用 :focus 配合 box-shadow 就能实现，但默认浏览器聚焦样式干扰大，必须重置 outline 才干净。
为什么:focus没反应？检查outline是否遮盖了box-shadow
多数浏览器（Chrome/Firefox）在输入框获得焦点时会默认加一层蓝色 outline，它会盖在 box-shadow 上面，导致发光效果“看不见”。这不是 :focus 失效，而是视觉被覆盖。
- 必须显式设置
outline: none或outline: 0（推荐后者，更兼容） - 若需保留可访问性焦点指示，改用
outline: 2px solid transparent+outline-offset: 2px避免重叠 -
box-shadow的扩散半径（第3个参数）建议 ≥ 4px，太小看不出“发光”感
如何让外发光柔和自然？控制box-shadow参数顺序和颜色透明度
box-shadow 的写法直接影响发光质感。硬边、过亮、颜色发灰，基本都是参数没调对。
- 格式固定为：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色 - 发光效果只需模糊+扩散，前两个偏移量保持
0 0 - 颜色推荐
rgba(0, 120, 255, 0.3)这类带透明度的亮色，比纯#007fff更通透 - 例如：
box-shadow: 0 0 8px 4px rgba(0, 120, 255, 0.3)
移动端点击无响应？确保input有tabindex且未被user-select阻断
部分安卓 WebView 或 iOS Safari 在 input[type="text"] 上不触发 :focus，尤其当父容器有 user-select: none 或元素被 pointer-events: none 影响时。
- 给 input 加
tabindex="0"强制可聚焦（非必需但保险） - 检查祖先元素是否设置了
user-select: none—— 它会阻止焦点获取 - 避免在
:focus规则里写transition: all .2s，应只过渡box-shadow，否则可能触发渲染抖动 - 真机测试时，用
input:focus { outline: red solid 2px; }快速验证是否真获得了焦点
最易忽略的是 outline 和 box-shadow 的图层顺序 —— 它们不在同一渲染层级，outline 总是压在 box-shadow 上面。不处理 outline，再漂亮的阴影也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
