在CSS初级项目里，表单输入框的聚焦效果是很基础也很实用的需求。通过:focus伪类配合border相关属性，就可以在用户选中输入框时改变其外观，从而提升交互体验。
什么是:focus伪类
:focus是CSS中用来表示元素获得焦点时的状态。对于input、textarea等表单控件，当用户点击或用键盘切换选中它，就会进入:focus状态。我们可以针对这个状态单独写样式。
用border实现基础聚焦效果
最简单的方式是在:focus时改变边框颜色与宽度。下面是一段HTML与CSS代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
input {
border: 1px solid #ccc;
padding: 8px;
}
input:focus {
border: 2px solid #409eff;
outline: none;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入内容">
</body>
</html>
上面的代码里，普通状态边框是灰色细线；当输入框聚焦，边框变蓝且加粗，同时用outline:none去掉了浏览器默认轮廓。
让变化更平滑
直接切换边框会让用户觉得生硬，可以加transition属性做过渡：
input {
border: 1px solid #ccc;
padding: 8px;
transition: border-color 0.2s ease;
}
input:focus {
border-color: #409eff;
outline: none;
}
这里只改border-color并加上过渡时间，体验会更自然。
注意事项
- 如果同时改border宽度，可能会造成输入框抖动，建议只改颜色或提前预留宽度。
- outline默认轮廓有利于无障碍访问，新手练习时可去掉，但实际项目要权衡。
- 使用box-shadow也能模拟边框发光，但不属于border属性范畴。
小结
在CSS初级项目中，用:focus选中输入框聚焦状态，再调整border的颜色或宽度，就能实现清晰的聚焦效果。配合transition还能让交互更舒服，完全不需要JS参与。