应使用 button:focus:not(:focus-visible) { outline: none; } 并配合 button:focus-visible { outline: 2px solid #007bff; }，兼顾可访问性与视觉体验。
button:focus 时的 outline 边框怎么关？
点击按钮后出现的“黑色/蓝色边框”，不是 border，而是浏览器自动加的 outline，专为键盘聚焦设计。直接写 button:focus { outline: none; } 能解决大部分场景，但有坑：
- 可访问性风险：完全移除
outline会让键盘用户失去焦点指示，尤其对屏幕阅读器不友好 - 部分浏览器（如 Safari）在
:focus-visible未触发时仍会 fallback 到:focus，所以只写:focus可能不够稳定 - 推荐写法是组合使用：
button:focus:not(:focus-visible) { outline: none; }，再配合button:focus-visible { outline: 2px solid #007bff; }，兼顾体验与合规
为什么 appearance: none 必须配 -webkit- 和 -moz- 前缀？
现代浏览器对 button 的默认渲染由 appearance 控制，它偷偷塞了内边距、背景渐变、系统高光——这些都会干扰你写的 box-shadow 或 border。只写 appearance: none 在 Chrome/Safari/Firefox 下都不生效：
-
-webkit-appearance: none是 Safari 和旧版 Chrome 的必需项 -
-moz-appearance: none是 Firefox 的必需项 - 写了
appearance: none后，padding、border、background全部退回到初始值，必须手动补全，否则按钮可能塌成一条线 - 特别注意：IE 完全不支持
appearance，但它的默认样式反而简单，不用额外处理
IE 中 button padding: 0 不生效怎么办？
IE6–8 的 button 默认内边距是硬编码的，padding: 0 基本无效。这不是你 CSS 写错，是浏览器 UA 样式层做了拦截：
- 必须搭配
border: 1px solid transparent，否则 IE7/8 会把 border 当作占位符，进一步压缩内容区 - 显式设置
line-height（比如line-height: 1.4），不然文字在 IE8 中容易被截顶 - 放弃
box-sizing: border-box——IE6–7 完全不识别，IE8 只在标准模式下勉强支持，且对button修正极不可靠 - 更稳妥的做法：用
height+line-height相等来撑高，再手动算好width包含padding和border
SVG 图标或带事件监听的 button 点击后也有轮廓？
只要元素可聚焦（比如加了 tabindex、绑了 click 事件、或是原生 button），浏览器就会给它加焦点环。SVG 尤其容易中招，因为很多人直接给 <svg> 加 onclick 却没设 tabindex="-1"：
立即学习“前端免费学习笔记（深入）”；
- 如果 SVG 不需要键盘操作，加
tabindex="-1"并配outline: none即可 - 如果需要可访问性，改用
focusable="false"（SVG 属性），比 CSS 更底层、更可靠 - 移动端要注意：iOS Safari 的
:active会持续到touchend后，导致轮廓残留；加transition: outline 0s或用transform: translateZ(0)触发重绘可缓解
真正麻烦的不是加样式，而是不同浏览器对“可聚焦”的判定逻辑不一致——Safari 认为带 onclick 的 <div> 可聚焦，Firefox 可能忽略，Chrome 又另有一套。实际项目里，得按目标浏览器矩阵逐个验证，不能只信一套 CSS。
