:focus边框变色无效主因是outline遮挡，需用outline:none并补替代样式；防布局抖动应预设border宽度；推荐:focus-visible兼顾无障碍；ios/微信需ontouchstart或cursor:pointer激活。
button:focus 边框变色无效？先看 outline 是否遮挡
直接写 button:focus { border-color: #007bff; } 没反应，大概率是浏览器默认的 outline 盖住了你设的边框。它不占布局、位置偏外、颜色常为深蓝或黑，视觉上完全压过 border。必须显式处理：outline: none; 或 outline: 0;（推荐前者）。但删了不能真“没反馈”——键盘用户靠 Tab 导航时会彻底失去焦点提示，得立刻补上替代样式。
用 border 实现聚焦边框要预留空间，否则页面抖动
如果设计要求“边框加粗+变色”，比如从 1px solid #ccc 变成 2px solid #007bff，直接改宽度会导致 layout shift，Lighthouse 会报 Cumulative Layout Shift 警告。正确做法是初始状态就用占位：
button { border: 2px solid transparent; box-sizing: border-box; }button:focus { border-color: #007bff; }- 确保全局已设
box-sizing: border-box;，否则border加宽会撑大按钮尺寸
:focus-visible 才是兼顾鼠标与键盘用户的正解
只用 :focus 会让鼠标点击后也出现边框，干扰视觉；但全砍 outline 又违反无障碍标准。现代方案是优先用 :focus-visible：
button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }- Chrome 86+、Firefox 89+、Edge 103+、Safari 15.4+ 原生支持；老版本可引入
focus-visiblepolyfill - 别写
button:focus { outline: none; }——这会把键盘用户的:focus-visible也干掉 - 微信 WebView 等环境可能忽略纯 CSS
:focus-visible，需 fallback 到 JS 监听focusin动态加 class
移动端点击无反馈？iOS Safari 需要主动唤醒
iOS Safari 默认压制非交互元素的焦点渲染逻辑，哪怕它是 button，纯 CSS :focus 或 :focus-visible 可能完全不触发。解法不是等系统更新：
- 给
button加 HTML 属性：ontouchstart=""（空事件即可激活底层聚焦机制） - 或加 CSS：
button { cursor: pointer; }，让系统识别为可点击目标 - 真机测试必须用手点，模拟器常误判；微信内嵌 WebView 还可能需要同时监听
touchstart和focus事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
