边框位移动画不触发需清除 outline 并用 transform 移动伪元素：加 outline: none、用 ::after + position: absolute + transform + transition，同时设 box-sizing: border-box 和 touch-action 确保响应式与多端一致。
focus 时边框位移动画不触发？检查是否遗漏 outline: none
浏览器默认会给 input 加上 outline，它会盖在你自定义的 border 动画之上，导致位移看起来“没动”或者错位。必须显式清除。
- 在
:focus规则里加outline: none（或outline: 0） - 如果要保留可访问性焦点指示，改用
box-shadow模拟，别直接删outline后不管 -
outline不参与盒模型计算，而border会，所以清除后动画位置才准
用 transform 实现平滑边框位移，别碰 border-width
靠增减 border-width 做“位移”是伪位移——它会改变元素尺寸，触发重排（reflow），卡顿明显，且响应式下容易错乱。
- 真正位移用
transform: translateY()或translateX()移动::after/::before伪元素 - 给边框层单独设
position: absolute，父容器position: relative - 动画必须加
transition: transform 0.3s ease，只写all会拖慢
input {
position: relative;
}
input::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: translateY(2px);
transition: transform 0.3s ease;
}
input:focus::after {
transform: translateY(0);
}
响应式下边框位移错位？检查父容器宽度和 box-sizing
输入框在小屏缩放时，如果 width 是百分比但没设 box-sizing: border-box，padding + border 会撑出容器，导致伪元素定位偏移。
- 所有输入框必须设
box-sizing: border-box - 避免在
input上直接设固定width，改用max-width: 100%+width: fit-content或flex布局控制伸缩 - 伪元素的
left/right值慎用像素，优先用0配合width: 100%
移动端 focus 动画延迟或失效？加 touch-action 和 tabindex
部分安卓 WebView 或 iOS Safari 在表单控件上对 :focus 响应迟钝，尤其嵌套在 div 里时。
立即学习“前端免费学习笔记（深入）”；
- 确保
input有tabindex="0"（虽非必需，但能提升部分旧内核兼容性） - 给容器加
touch-action: manipulation，减少触摸延迟 - 避免用
pointer-events: none盖住输入框，哪怕是为了“美化”，也会截断 focus 流 - 真机测试时，别只看 Chrome DevTools 的设备模拟，iOS 真机常有差异
