使用:focus伪类配合box-shadow和transition实现输入框聚焦时的边框阴影效果，先去除outline，再通过border-color和box-shadow（0 0 8px rgba(74,144,226,0.6)）添加视觉反馈，并用transition:all 0.3s ease使变化平滑自然。
要实现输入框聚焦时的边框阴影效果，可以使用 CSS 的 :focus 伪类结合 box-shadow 属性，并添加过渡动画让效果更自然。
1. 使用 :focus 触发样式变化
当用户点击输入框并获得焦点时，:focus 伪类会被激活。你可以在这个状态下修改边框颜色、添加阴影等。说明： 去掉默认 outline（浏览器自带高亮）后，用自定义的 border 和 box-shadow 来提升视觉反馈。
2. 添加 box-shadow 实现发光效果
box-shadow 可以设置水平偏移、垂直偏移、模糊半径、扩展半径和颜色。聚焦时通过增加内阴影或外阴影突出输入框。- 0 0：表示阴影在元素中间无偏移
- 8px：模糊半径，值越大越“晕开”
- rgba(74, 144, 226, 0.6)：蓝色带透明度，视觉更柔和
3. 加入 transition 让变化更平滑
给 border 和 box-shadow 添加过渡动画，使颜色和阴影的变化不突兀。- transition: all 0.3s ease；表示所有属性在 0.3 秒内缓动变化
- 也可细化为 transition: border-color 0.3s ease, box-shadow 0.3s ease
基本上就这些，不需要 JavaScript，纯 CSS 就能完成现代表单常用的聚焦动效，既美观又提升用户体验。
