border: none 仅清除边框，还需重置 outline、padding、appearance 等样式并兼顾可访问性，否则按钮仍显“有边”；推荐使用自定义 focus outline、-webkit-appearance: none、cursor 和 pointer-events 等组合方案。
border: none 是实现无边框按钮最直接有效的写法，但仅靠它还不够——默认 outline、padding、background 和可访问性问题会立刻暴露出来。
为什么 border: none 之后按钮还“看起来有边”
浏览器对 button 元素有内置的 outline（聚焦时的虚线框）和默认 padding，某些 UA 样式还会叠加 border-image 或 box-shadow。光写 border: none 只清除了 border，其他视觉残留仍在。
- 必须同时设置
outline: none（但注意：移除 focus outline 会损害键盘可访问性，建议改用outline-offset+ 自定义outline替代） -
padding值不为 0 时，按钮内容周围仍有“空白边”，需按需重置，例如padding: 0或精确控制 - 部分旧版 Safari 对
button的appearance有强干预，可加-webkit-appearance: none彻底剥离 UA 样式
<button> vs <input type="button"> 在无边框场景下的实际差异
两者都能用 border: none 去边，但行为一致性完全不同：
-
<button>支持子元素（如<svg>、<span>），适合图标+文字组合；<input type="button">的value是纯文本，无法嵌套 HTML -
<button>的默认padding更统一，<input>在 IE/Edge Legacy 中对line-height和垂直居中处理异常，容易导致高度错位 - 若按钮仅作触发器（无表单语义），
<button type="button">比省略type更安全——省略时某些环境会默认为submit，点一下就刷新页面
轻量级 ≠ 简单粗暴地删样式
真正轻量，是去掉冗余、保留必要、兼顾交互反馈。常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 直接
all: unset会抹掉cursor: pointer和user-select: none，鼠标悬停没手型，文字还能被选中 - 完全去掉
background后，按钮在深色背景上可能不可见，至少设background: transparent - 禁用状态
:disabled下，opacity: 0.5不够——要同步降cursor、加pointer-events: none，否则仍可点击 - 如果按钮只含图标（无文字），务必加
aria-label，否则屏幕阅读器无法识别功能
一个最小可用的无边框按钮 CSS 片段
以下代码已避开上述多数坑，适配现代浏览器且保基本可访问性：
.btn-icon {
border: none;
outline: none;
background: transparent;
padding: 0;
margin: 0;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
user-select: none;
}
.btn-icon:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
.btn-icon:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
复杂点在于：轻量不是“越少越好”，而是“刚好够用”。比如 outline 不能真删，得换；appearance 在 Safari 里不加就可能回退到系统按钮；pointer-events: none 比单纯 opacity 更可靠地阻止误操作。这些细节，漏掉任意一条，都可能让按钮在某个设备或辅助工具里失效。
