CSS初级项目如何美化输入框聚焦效果_border color与box-shadow结合

通过结合border-color与box-shadow可提升输入框聚焦时的视觉反馈。首先创建带class的input元素，设置宽度、内边距、字体、边框、圆角及过渡效果，并移除默认轮廓；聚焦时边框变为蓝色并添加半透明蓝色外阴影，增强激活状态的可视性；可进一步调整阴影模糊度、添加轻微缩放或根据不同状态更改颜色，使交互更细腻自然，从而提升整体界面体验。

输入框的聚焦效果是提升网页交互体验的重要细节。通过结合 border-color 与 box-shadow，可以让用户在点击输入框时获得更明显、更美观的视觉反馈。下面介绍如何用 CSS 实现这种美化效果。

基础结构：HTML 输入框

先创建一个简单的文本输入框：

默认样式设置

为输入框设置基本样式，使其看起来更整洁：

.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，能让输入框在聚焦时既醒目又不失优雅，提升整体界面质感。不复杂但容易忽略细节。