应保留并优化:focus轮廓而非直接移除：用outline:none关闭默认样式后，以box-shadow或border模拟高对比焦点指示；优先采用:focus-visible实现键盘聚焦时显示、鼠标点击时不显示，并为Safari等不支持浏览器添加fallback方案。
为什么点击后总有蓝色/黑色外边框？
这不是 bug，是浏览器给可聚焦元素（button、input、a 等）自动添加的 :focus 轮廓，专为键盘用户（Tab 导航）提供焦点指示。直接删掉会破坏无障碍访问，尤其对屏幕阅读器和键盘操作者不友好。
outline: none 不是万能解，但可以安全用
单独写 outline: none 会导致键盘用户完全看不到当前焦点在哪。真正可行的做法是「替换」而非「删除」：
- 先用
outline: none关掉默认轮廓 - 再用
box-shadow或border模拟一个高对比、符合 WCAG 的焦点样式（比如box-shadow: 0 0 0 2px #3b82f6） - 确保阴影颜色与背景对比度 ≥ 3:1（可用 axe 或 Lighthouse 检测）
:focus-visible 是更优解，但兼容性要兜底
现代方案是让鼠标点击时不显示轮廓，只在键盘聚焦时显示——靠 :focus-visible 实现：
-
button:focus:not(:focus-visible) { outline: none; }—— 鼠标点就静默 -
button:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }—— 键盘 Tab 时有清晰反馈 - Safari 当前不支持
:focus-visible，需加降级：用button:focus做 fallback，或配合 JS 监听keydown事件动态加 class
别漏掉 input[type="search"] 这类特殊元素
它在 Safari 和 Chrome 中自带私有样式（圆角、内边距、甚至搜索图标），仅设 border: none 和 outline: none 不够：
立即学习“前端免费学习笔记（深入）”；
- 必须加
-webkit-appearance: none（Chrome/Safari）和-moz-appearance: none（Firefox） - 某些版本 Safari 对
outline-offset在outline: auto下无效，得先显式设outline-style: solid - 如果用了
all: unset，记得重设padding、font-size等基础样式，否则输入框可能塌缩或文字错位
