17370845950

应将 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 写，控制好属性范围和时长——表单的焦点反馈立刻变得专业又舒服。