input边框过渡失效主因是误用复合属性border或all，正确做法是仅对border-color、border-width等可计算子属性显式声明transition，并确保写在默认样式中、配合:focus/:active等伪类同步更新。
直接给 input 加 transition: border 0.2s 大概率没反应——因为 border 是复合属性，浏览器不支持对它做过渡；真正能平滑动画的只有单个可计算值，比如 border-color、border-width 或 outline。
为什么 input 的边框过渡经常失效？
常见错误是写成：transition: border 0.3s 或 transition: all 0.3s。这会导致：
-
border-style无法动画（浏览器直接跳变） - 同时过渡
padding或font-size会触发重排，卡顿甚至中断动画 - 某些旧版 Safari 对
border-width过渡支持不稳定，尤其在box-sizing: content-box下
正确做法是拆解目标属性，只动明确支持过渡的子项。
安全可用的 transition 组合
以下三组是经过多端验证、无兼容性风险的写法：
-
transition: border-color 0.25s ease, outline-color 0.25s ease—— 最常用，hover/focus 时改边框色 + 轮廓色 -
transition: box-shadow 0.2s ease—— 比边框更轻量，适合高亮反馈（如focus时加内阴影） -
transition: background-color 0.2s ease, color 0.2s ease—— 用于深色模式切换或禁用态淡出
注意：border-width 可以过渡，但必须保证初始和目标状态都用了 solid（或同一种 border-style），且推荐搭配 box-sizing: border-box 防抖动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
:focus 和 :placeholder-shown 怎么配合 transition？
浮动标签场景下，常需要「聚焦时边框变色 + 标签上浮」同步发生。关键点在于：
- 把
transition写在input的默认样式里，不是只写在:focus中，否则移出焦点时会“啪”一下回弹 - 标签上浮靠
input:focus + label或input:not(:placeholder-shown) + label触发，这两者都要配相同的transition值，否则不同步 - 如果用了
outline: none，务必补上等效的box-shadow并对其加transition，否则键盘用户失去焦点反馈
例如：input { border: 1px solid #ccc; transition: border-color 0.2s, box-shadow 0.2s; } input:focus { border-color: #4a6fa5; box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2); }
移动端点击没过渡？得补 :active 状态
iOS Safari 和 Android Chrome 在触摸后不会触发 :hover，但 :focus 和 :active 是可靠的。所以：
- 不要只依赖
:hover做输入框反馈 - 给
input:active和input:focus设置一致的过渡目标，确保触屏点击瞬间有视觉响应 - 如果用了自定义 focus ring（如
outline替换为box-shadow），记得在:active里也同步更新，否则点击时 ring 会“消失一帧”
最易被忽略的是：transition 必须在基础状态声明，且所有触发伪类（:focus、:active、:not(:placeholder-shown)）修改的属性，都得是那个基础 transition 列表里的成员——漏一个，那一帧就掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
