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

在表单设计中，输入框获得焦点时给出明确的视觉反馈可以提升用户体验。使用CSS的:focus伪类配合box-shadow属性，就能让输入框在聚焦时出现一圈柔光晕，而不依赖任何脚本。

基本实现方式

最常见做法是给input标签写上默认边框，然后在:focus状态下追加box-shadow。阴影的第三个值代表模糊距离，值越大光晕越散；第四个值是扩散大小，可让光晕更明显。

/* 基础输入框样式 */
input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none; /* 去掉浏览器默认聚焦轮廓 */
  transition: box-shadow 0.2s ease;
}

/* 聚焦时添加蓝色光晕 */
input[type="text"]:focus {
  border-color: #409eff;
  box-shadow: 0 0 8px 2px rgba(64, 158, 255, 0.4);
}

参数调节建议

光晕的观感主要由以下几个box-shadow参数控制：

• 模糊半径：控制光晕边缘的柔和程度，建议设置在6px到12px之间。
• 扩散半径：让阴影向外扩张，小数值即可，避免过于厚重。
• 颜色透明度：使用rgba颜色并降低alpha值，光晕更自然。

兼容多类输入框

如果页面里还有textarea或select，也可以复用同一套聚焦规则：

/* 统一表单控件聚焦光晕 */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 6px 1px rgba(24, 144, 255, 0.35);
  border-color: #1890ff;
}
</code>

注意事项

使用box-shadow做光晕时要记得把默认的outline去掉，否则会出现双重边框感。另外若项目中有自定义主题，可将光晕颜色提取为CSS变量方便维护。

提示：光晕效果虽好，但不宜过亮过大，否则在浅色背景上会显得刺眼，适度即可。

cssbox-shadow:focus伪类修改时间：2026-07-28 19:03:19