:focus-visible比:focus更适合处理聚焦偏移，因为它仅在键盘操作时触发，避免鼠标点击时的多余视觉反馈；但必须配合box-sizing: border-box及一致的border-width使用，否则仍会抖动。
为什么:focus-visible比:focus更适合处理聚焦偏移
因为:focus会同时响应鼠标点击和键盘Tab聚焦，而鼠标点击时用户并不需要强视觉反馈——这时加粗边框或阴影反而引发位移；:focus-visible只在键盘操作（如Tab、Shift+Tab）时触发，能精准区分交互方式，避免鼠标点击带来的多余样式变更。
必须配合box-sizing: border-box使用
即使用了:focus-visible，如果没统一盒模型，边框变化仍会导致尺寸跳变。常见错误是只在input上设box-sizing: border-box，却漏掉父容器或重置规则。
- 全局强制生效：
* { box-sizing: border-box; } - 若已有其他重置，检查是否覆盖了
input、textarea等表单控件 - 特别注意：某些UI库（如Bootstrap）的form-control类可能覆盖了box-sizing，需提高选择器优先级
:focus-visible的兼容性与降级写法
Chrome/Firefox/Edge 88+原生支持，Safari从15.4开始支持；旧版Safari或IE需polyfill或回退到:focus。
- 推荐渐进增强写法：
input:focus, input:focus-visible { border-color: #409eff; } - 不建议单独只写
:focus-visible，否则旧浏览器完全无聚焦反馈 - 若用postcss-focus-visible插件，确保它注入的是
@supports selector(:focus-visible)包裹的规则，而非盲目替换
边框宽度一致是前提，颜色变化只是表象
很多开发者以为只要用了:focus-visible就万事大吉，结果还是抖动——根本原因还是默认状态没预留边框空间。
- 错误写法：
input { border: none; } input:focus-visible { border: 2px solid #409eff; }→ 从0px到2px必然位移 - 正确写法：
input { border: 2px solid #ddd; } input:focus-visible { border-color: #409eff; } - 若想保持视觉轻量，默认边框可用
border-color: transparent，但务必确认背景色不会造成“消失错觉”
真正容易被忽略的是：聚焦偏移从来不是单一伪类的问题，而是box-sizing + border-width一致性 + 交互意图识别三者缺一不可。少一个，哪怕用了:focus-visible，抖动照旧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
