使用:focus伪类修改聚焦时边框颜色为#007bff并移除outline；2. 通过transition设置border-color的0.3s平滑过渡；3. 完整样式需包含padding、字号、边框等基础属性，确保动画自然且跨浏览器兼容。
要让输入框在聚焦时边框颜色平滑变化，可以使用 css 的 :focus 伪类配合 border-color 和 transition 属性实现。
1. 使用 :focus 设置聚焦状态样式
当用户点击输入框并获得焦点时，:focus 伪类会被触发。你可以在这个状态下修改边框颜色：
-
border-color: #007bff;将边框颜色改为蓝色 - 确保设置
outline: none来移除默认的浏览器聚焦轮廓（可选，但常用于自定义样式）
2. 添加过渡效果使颜色变化更自然
直接改变边框颜色会显得生硬，加入 transition 可实现渐变动画：
-
transition: border-color 0.3s ease;表示边框颜色在 0.3 秒内平滑过渡 - 该属性应写在默认状态（未聚焦）中，以确保进入和离开聚焦时都有动画
3. 完整示例代码
以下是一个可以直接使用的完整样式示例：
<input type="text" class="input-style" placeholder="点击我试试">基本上就这些。只要合理使用 :focus 和 transition，就能轻松实现美观的输入框聚焦动效。注意别忘了测试不同浏览器下的表现，保持兼容性。不复杂但容易忽略细节。
