使用:focus伪类和border属性可实现表单输入框聚焦效果，如边框变色、加粗及添加阴影动画，提升交互体验。
在CSS初级项目中，实现表单输入框的聚焦效果主要依赖于 :focus 伪类和 border 属性的结合使用。当用户点击输入框（即获得焦点）时，通过样式变化提示当前正在输入的位置，提升用户体验。
理解 :focus 伪类
:focus 是一个常用的伪类选择器，用于选中用户正在操作（如点击或按 Tab 键进入）的表单元素。常见应用于 input、textarea 等可输入控件。
例如，让输入框在聚焦时边框变蓝：
input:focus {
border: 2px solid blue;
outline: none; /* 去除默认轮廓线，自定义更美观 */
}
利用 border 控制边框样式
border 属性可以设置边框的宽度、样式和颜色。配合 :focus 使用，能清晰地展示输入状态。
立即学习“前端免费学习笔记（深入）”；
常用 border 样式示例：
- solid：实线边框，最常用
- dashed：虚线边框，适合强调但不突兀
- none 或 0：无边框，可用于重置
比如实现“聚焦时边框加粗并变为绿色”：
input {border: 1px solid #ccc;
padding: 8px;
transition: border 0.3s ease; /* 添加过渡动画更自然 */
}
input:focus {
border: 2px solid green;
outline: none;
}
增强视觉效果的小技巧
为了让聚焦效果更友好，可以结合其他 CSS 属性一起使用：
- transition：添加边框变化的过渡动画，避免突兀
- box-shadow：配合内阴影或外阴影增强立体感，例如模拟“发光”效果
- background-color：轻微改变背景色，进一步提示当前输入区域
示例：带发光效果的聚焦样式
input:focus {border: 2px solid #40a9ff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
transition: all 0.3s ease;
}
基本上就这些。掌握 :focus 和 border 的基本用法后，你可以根据设计需求灵活调整颜色、粗细和动画效果，让表单交互更直观自然。不复杂但容易忽略细节，比如去掉 outline 后要提供足够的视觉反馈，否则会影响可访问性。
