应将 transition 写在默认状态而非 :focus 中，推荐 input{transition:border-color 0.2s ease,box-shadow 0.2s ease;}，:focus 中仅修改 border-color 和 box-shadow，并注意 outline 处理以保障可访问性。
表单元素（如 input、textarea、select）在获取焦点时，边框颜色或阴影突然变化，确实会显得生硬不自然。解决方法很简单：用 transition 给 focus 状态的样式变化加个平滑过渡。
给 focus 属性加上 transition
关键点是：transition 必须写在**默认状态（非 focus）**上，而不是只写在 :focus 里。否则首次聚焦时不会生效（因为初始状态没定义过渡）。
- 推荐写法：在 input 标签的默认样式中统一设置
transition: border-color 0.2s ease, box-shadow 0.2s ease; - 然后在 :focus 中只改需要变化的属性，比如
border-color: #409eff;和box-shadow: 0 0 0 2px rgba(64, 158, 239, 0.2); - 避免写
transition: all 0.2s;—— 它会让所有属性都过渡，可能引发意外动画（比如 width、opacity 变化）
统一过渡时间和缓动函数
边框和阴影变化最好用相同的持续时间与缓动方式，视觉才协调。常用组合：
-
0.2s ease：轻快自然，适合大多数表单 -
0.25s cubic-bezier(0.4, 0, 0.2, 1)：更现代的缓入缓出效果（Material Design 风格） - 避免超过 0.3s，否则会有延迟感；也别低于 0.1s，否则仍显突兀
注意 outline 的干扰
有些浏览器默认给聚焦元素加 outline（尤其是键盘操作时），它不走 transition，会直接闪现。处理建议：
立即学习“前端免费学习笔记（深入）”；
- 保留可访问性：用
outline: none;同时补上更明显的 focus 样式（如加强 box-shadow 或 border） - 或者改用
outline: 2px solid transparent;再配合outline-offset: 2px;，这样它也能被 transition 影响（部分浏览器支持） - 更稳妥的做法：用
:focus-visible区分鼠标/键盘聚焦，只对键盘用户保留 outline 并优化其样式
基本上就这些。核心就一条：transition 往常态写，变化往 :focus 写，控制好属性范围和时长——表单的焦点反馈立刻变得专业又舒服。
