:focus伪类配合box-shadow可实现输入框聚焦光晕效果，推荐用rgba色值与8–20px模糊半径营造通透感，支持多层阴影增强立体感，并需清除outline、适配深色背景及移动端，辅以transition提升动效流畅性。
直接用 :focus 伪类配合 box-shadow 就能实现输入框聚焦时的光晕效果，简单高效，兼容性也好。
基础写法：加一层柔和外阴影
这是最常用也最稳妥的方式，重点是控制阴影的模糊半径和颜色透明度：
-
用
rgba()或hsla()配色，比如rgba(0, 120, 255, 0.3)，让光晕有通透感 - 模糊值（blur）建议设为 8px–20px，太小不明显，太大边缘发虚
-
避免写硬边阴影，别用
0 0 0 2px #0078ff这种纯色描边，它不是光晕
input:focus {
outline: none;
box-shadow: 0 0 12px rgba(0, 120, 255, 0.4);
}
进阶技巧：多层阴影增强立体感
单层阴影有时显得单薄，叠加两层可让光晕更自然：
- 内层：小偏移 + 中等模糊 → 贴近边框的亮边
- 外层：零偏移 + 大模糊 → 弥散的光晕氛围
- 两层颜色可略有差异，比如外层稍浅或带点蓝调
input:focus {
outline: none;
box-shadow:
0 0 4px rgba(0, 120, 255, 0.5),
0 0 16px rgba(0, 120, 255, 0.2);
}
注意细节：别让效果干扰可用性
光晕再好看，也不能牺牲体验：
立即学习“前端免费学习笔记（深入）”；
-
务必清除默认
outline，否则 Safari/Chrome 可能双轮廓并存 - 高对比场景下慎用浅色光晕，比如深色背景配淡蓝阴影，可能看不清
-
移动端需额外测试，iOS Safari 对
box-shadow渲染略保守，可适当加大模糊值
可选增强：加过渡动画更顺滑
聚焦/失焦瞬间加个渐变过渡，观感更专业：
- 用
transition: box-shadow 0.2s ease即可 - 不要过渡
outline，它本身不支持平滑变化 - 如果同时改边框色，建议统一用同一
transition声明
input {
transition: box-shadow 0.2s ease;
}
input:focus {
outline: none;
box-shadow: 0 0 12px rgba(0, 120, 255, 0.4);
}
基本上就这些。光晕效果不复杂但容易忽略细节，关键是阴影要“软”、颜色要“透”、动效要“稳”。
