仅写 border: none 无法彻底去除按钮边框，因其失效主因是 outline、-webkit-appearance: button 原生样式及框架重置样式干扰；需组合 border: none、outline: none、-webkit-appearance: none 等才能可靠生效。
直接写 border: none 就能去掉按钮边框，但只写这一句大概率失效——因为浏览器的 outline、-webkit-appearance 和默认聚焦样式会“补位”。
为什么只写 border: none 还有边框？
你看到的“边框”，大概率不是 border，而是：
• 点击/聚焦时的 outline（独立于边框的焦点环，不占布局空间）
• Chrome/Safari 中 button 的原生外观（由 -webkit-appearance: button 控制，自带内边距、圆角和视觉边框）
• 某些 UI 框架（如 Bootstrap）或重置 CSS 已经给 button 设了全局 border，你的规则优先级不够
border: 0 和 border: none 到底该用哪个？
语义和兼容性不同：
• border: none 明确表示“不渲染边框”，CSS2.1+ 全支持，推荐首选
• border: 0 是把宽度设为 0，旧版 IE（IE8 及以下）对它的解析略稳定，但现在基本不用考虑
• 别用 border: transparent：颜色透明，但宽度和样式仍存在，可能干扰盒模型或触发意外 focus 行为
真正生效的最小可靠组合
要让按钮彻底“无边框感”，至少得覆盖三层：
• border: none —— 干掉原始边框
• outline: none —— 干掉聚焦轮廓（但注意可访问性）
• -webkit-appearance: none 和 -moz-appearance: none —— 解除浏览器原生控件外观绑定
• （可选）background: transparent —— 避免背景色掩盖去边框效果
示例：
button.no-border {
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
}
注意：outline: none 会损害键盘可访问性。如果项目要求合规，应替换为高对比度的 outline 或 box-shadow，例如：outline: 2px solid #0066cc（确保与背景对比度 ≥ 3:1）。
容易被忽略的副作用
去掉边框后，按钮在视觉上可能“消失”，尤其当它没设 background、color 或 padding 时。
• 默认 button 在 Firefox 中还有轻微阴影，需加 box-shadow: none
• 移动端 Safari 聚焦时自动缩放页面，和边框无关，但常被误判，需用 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 抑制
• 如果按钮是空内容（比如仅图标），记得加 line-height 或 font-size 防止高度塌陷
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
