css输入框聚焦时想产生光晕效果怎么办_通过:focus伪类添加box-shadow高亮

: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);
}

基本上就这些。光晕效果不复杂但容易忽略细节，关键是阴影要“软”、颜色要“透”、动效要“稳”。