通过结合border-color与box-shadow可提升输入框聚焦时的视觉反馈。首先创建带class的input元素，设置宽度、内边距、字体、边框、圆角及过渡效果，并移除默认轮廓；聚焦时边框变为蓝色并添加半透明蓝色外阴影，增强激活状态的可视性；可进一步调整阴影模糊度、添加轻微缩放或根据不同状态更改颜色，使交互更细腻自然，从而提升整体界面体验。
输入框的聚焦效果是提升网页交互体验的重要细节。通过结合 border-color 与 box-shadow，可以让用户在点击输入框时获得更明显、更美观的视觉反馈。下面介绍如何用 CSS 实现这种美化效果。
基础结构：HTML 输入框
先创建一个简单的文本输入框：
<input type="text" class="custom-input" placeholder="请输入内容...">
默认样式设置
为输入框设置基本样式，使其看起来更整洁：
.custom-input {
width: 250px;
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 6px;
outline: none; /* 移除浏览器默认聚焦轮廓 */
transition: all 0.3s ease; /* 添加平滑过渡效果 */
}
这里使用了 transition 让边框和阴影变化更自然。
立即学习“前端免费学习笔记（深入）”；
聚焦效果：border-color 与 box-shadow 结合
当用户点击输入框时，我们希望边框颜色变蓝，并添加一层柔和的外阴影：
.custom-input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}
- border-color: #007bff：将边框变为蓝色，表示已激活。
- box-shadow 添加了一个半透明的蓝色光晕，增强视觉层次。
- rgba 的 alpha 值控制阴影透明度，避免过于刺眼。
进阶美化建议
可以进一步优化用户体验：
- 调整 box-shadow 的模糊半径（如 6px~10px）来控制光晕范围。
- 配合 transform: scale(1.02) 轻微放大输入框，增加动感（需控制幅度避免布局抖动）。
- 对不同状态使用不同颜色，例如错误时用红色边框，成功时用绿色。
基本上就这些。合理使用 border-color 和 box-shadow，能让输入框在聚焦时既醒目又不失优雅，提升整体界面质感。不复杂但容易忽略细节。
