<p>最直接、兼容性最好、语义最清晰的去按钮边框方式是 border: none，但需同时处理 outline 和 appearance 才能彻底消除边框；outline 应自定义而非直接设为 none 以保障可访问性，appearance 需用 -webkit- 和 -moz- 前缀重置。</p>
border: none 是最直接、兼容性最好、语义最清晰的去按钮边框方式。它明确告诉浏览器“不渲染任何边框”，不是靠把宽度设为 0 或颜色变透明来“藏起来”。但只写这一句，常会漏掉焦点轮廓（outline）和浏览器原生外观（appearance），导致点击后仍有蓝环或边框残留。
button 边框没消失？先确认是不是 outline 在作怪
很多情况下你改了 border，但点击按钮后还是看到一圈蓝色/黄色轮廓——那不是边框，是 outline，它是独立于边框的焦点指示器，专为键盘用户设计。
- 仅加
border: none无法影响outline - 必须显式处理：
outline: none（不推荐直接用）或更安全的outline: 2px solid #007bff（自定义高对比焦点环） - 若项目要求可访问性，
outline: none是反模式；应替换而非删除
Chrome/Safari/Firefox 按钮仍有“假边框”？检查 appearance
某些浏览器（尤其是 Chrome 和 Safari）会给 button 加上系统级边框和内阴影，哪怕 border: none 已生效，视觉上仍像有边框。
- 加
-webkit-appearance: none（Chrome/Safari）和-moz-appearance: none（Firefox）可解除原生控件样式 - 配合
background: transparent防止默认背景色掩盖效果 - 注意：
appearance: none是现代写法，但旧版 IE 不支持，none值本身在所有主流浏览器中已稳定
border: none 和 border: 0 到底该用哪个？
两者视觉效果一样，但底层含义和兼容性有差异：
立即学习“前端免费学习笔记（深入）”；
-
border: none是 CSS2.1+ 标准写法，语义明确：“不绘制边框”，推荐首选 -
border: 0实际是border-width: 0的简写，旧版 IE（如 IE8）对某些表单控件支持略好，但现代项目无需考虑 -
border-color: transparent不推荐——边框依然存在（宽度、样式未清），可能干扰盒模型或触发意外 focus 行为
真正干净的按钮去边框，往往要三步：清 border、压 outline（或重定义）、关 appearance。漏掉任意一环，都可能在某个浏览器或交互状态下露出“影子边框”。
