正确写法是box-shadow: 0 0 12px 3px rgba(106, 90, 205, 0.5)，需配合input:focus和outline: none，前两值为0确保居中发光，正扩展半径撑出清晰外光晕，rgba透明度适配背景避免刺眼。
box-shadow 实现发光边框的正确写法
直接用 box-shadow 就能做出发光效果，但很多人写错参数顺序或漏掉关键值，导致光晕不均匀、内发光误触发，或者在 focus 时闪烁。
标准写法是：box-shadow: 0 0 8px 2px rgba(106, 90, 205, 0.6) —— 注意四个长度值：水平偏移、垂直偏移、模糊半径、扩展半径。前两个为 0 才能让光晕居中；扩展半径（第四个值）决定“边框厚度”，设为正数才能撑出清晰外光晕。
- 模糊半径太小（如
2px）→ 光边生硬，像描边不是发光 - 扩展半径为负（如
-1px）→ 光往里收，容易和 input 内容重叠甚至遮挡文字 - 没设
rgba()透明度 → 发光过重，尤其深色背景上刺眼
:focus 时才发光，避免默认干扰
用户真正需要的是交互反馈，不是一上来就亮瞎眼。把发光效果限定在 :focus 状态下，既符合可访问性规范，也减少视觉噪音。
别写成这样：input { box-shadow: ... } —— 这会让所有输入框常亮，尤其表单里多个字段时非常混乱。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
input:focus { box-shadow: 0 0 12px 3px rgba(106, 90, 205, 0.5); outline: none; } - 务必加
outline: none，否则 Chrome/Firefox 默认 focus outline 和自定义 shadow 叠加，出现双轮廓 - 如果用了
border，建议保持原 border 宽度不变，只靠 shadow 做“附加光效”，否则尺寸跳动影响布局
兼容老浏览器的 fallback 处理
IE10+ 和所有现代浏览器都支持 box-shadow，但如果你的项目还要跑 IE9 或更早，它完全不识别这个属性 —— 此时不能靠 JS 检测补救，得用降级策略。
最稳妥的做法是：默认状态用实线边框（比如 border: 2px solid #6a5acd），focus 时替换为发光 + 去 border 的组合，这样即使 shadow 不生效，至少还有颜色变化提示。
- 不要依赖
@supports (box-shadow: 0 0 0)做条件加载 —— 它在旧版 Safari 和部分 Android WebView 里行为不稳定 - 避免用
filter: drop-shadow()替代 —— 它作用于整个元素盒模型，圆角会被切掉，且性能开销略高 - 移动端注意：iOS Safari 对大模糊值（>20px）渲染偏淡，建议模糊半径控制在
16px以内
发光颜色怎么选才不翻车
别直接套用设计稿里的纯色发光色。屏幕显示的“发光感”取决于对比度和背景色，同一组 rgba(255, 0, 0, 0.4) 在白底上像雾，在黑底上才像火。
- 浅色背景（#fff / #f5f5f5）→ 用紫/青/蓝系（如
rgba(106, 90, 205, 0.5)），饱和度中等，避免荧光黄绿 - 深色背景（#121212）→ 改用暖色（如
rgba(255, 215, 0, 0.7)），提高亮度值，否则光晕被吞没 - 禁用
hsl()动态色（如hsl(240, 100%, 70%)）→ 部分旧安卓浏览器解析异常，转成固定rgba()更稳
发光效果本身没有“标准答案”，但参数错一位，视觉感受就差一倍。调的时候盯着真实设备看，而不是仅靠开发工具预览。
