直接用 input:focus { box-shadow: 0 0 8px rgba(66, 153, 225, 0.6); } 即可实现柔和外发光，需避免纯色不透明、父容器 overflow: hidden 裁剪、或重置 appearance 导致失效，并注意 Safari 渲染锯齿与暗色主题下透明度适配。
focus 时用 box-shadow 实现外发光效果
直接给 input 或 textarea 元素加 :focus 伪类 + box-shadow 就能实现，不需要 JS。关键不是“发光”，而是阴影的模糊半径和颜色透明度要调对。
-
box-shadow: 0 0 8px rgba(66, 153, 225, 0.6)是常用起手值：水平/垂直偏移为 0，模糊半径 8px，蓝色带一定透明度 - 避免写成
box-shadow: 0 0 8px #4299e1—— 纯色不透明会导致光晕生硬，视觉上像“描边”而非“发光” - 如果表单用了
outline: none，务必保留box-shadow，否则键盘 Tab 导航时会完全失去焦点提示
为什么 input:focus 不生效？检查这三处
常见失效不是 CSS 写错，而是被其他规则覆盖或条件不满足。
- 是否写了
input:focus却忘了加浏览器前缀？现代浏览器已无需-webkit-focus-ring-color，但旧项目里可能残留干扰样式 - 是否在父容器上用了
overflow: hidden？box-shadow会被裁掉，导致“发光消失”——改用overflow: visible或给父元素留点 padding - 是否用了
appearance: none或重置了所有边框？确保没连带把outline和box-shadow一起重置掉
兼容性与性能注意点
box-shadow 在所有现代浏览器中表现一致，但有两个实际影响容易被忽略：
- 在 Safari 上，如果同时设置了
border-radius和大模糊值（如 >20px），可能出现轻微渲染锯齿，建议模糊值控制在 12px 以内 - 不要对大量表单项（比如表格里上百个
input）统一加高成本阴影，box-shadow: 0 0 20px rgba(0,0,0,0.2)比0 0 4px rgba(0,0,0,0.1)绘制开销明显更高 - 暗色主题下，别只换阴影颜色而不调整透明度——
rgba(255, 255, 255, 0.3)在黑底上比在白底上更显眼，需单独测试
移动端 focus 发光触发异常怎么办
iOS Safari 默认会给聚焦的 input 加一层半透明灰色背景，会盖住你的发光效果；Android Chrome 则可能因快速失焦导致阴影闪一下。
立即学习“前端免费学习笔记（深入）”；
- 加
-webkit-appearance: none可去除 iOS 默认聚焦样式，但必须同步补全border和background，否则输入框“消失” - 安卓端如果点击后立刻失焦（比如表单自动提交），发光几乎看不到——这时不如改用
:active配合短时 transition 模拟按下反馈 - 真机调试时用 Safari 开发者工具远程检查
:focus是否被触发，别只信桌面模拟器
