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