button的border:none没生效，是因为“边框”实为outline、-webkit-appearance或::-moz-focus-inner等浏览器默认样式，需同时设置border:none、outline:none和-webkit-appearance:none才能彻底清除。
button 的 border: none 为什么没生效？
只写 border: none 常常不够——你看到的“边框”大概率不是 border，而是浏览器自动生成的 outline 或原生控件样式（appearance）。尤其点击后出现的蓝环/黑框，基本是 outline 在起作用，它和边框无关，也不受 border 控制。
必须同时处理的三个 CSS 属性
真正干净地隐藏按钮默认边框，要三者齐下：
-
border: none—— 明确取消边框绘制，语义清晰，优先用这个而不是border: 0 -
outline: none或更推荐outline: 2px solid #007bff; outline-offset: 2px;——outline: none能去蓝框，但会损害键盘用户可访问性；若项目有无障碍要求，应改用自定义高对比焦点环 -
-webkit-appearance: none;和-moz-appearance: none;—— Chrome/Safari/Firefox 默认给button加系统级边框和内阴影，仅靠border: none压不住，必须关掉appearance
Firefox 里按钮内部还有虚线？::moz-focus-inner 是关键
Firefox 会在 button 和 input[type="button"] 内部加一层默认边框，表现为点击后按钮文字周围一圈细虚线。这不是 outline，也不是 border，而是伪元素 ::-moz-focus-inner 的默认行为。
必须单独重置：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border: 0;
padding: 0;
}
注意：这个伪元素只在 Firefox 生效，IE 和 Chrome 完全忽略它。
IE6–7 下 focus 后虚线框反复出现怎么办？
老版本 IE（尤其是 IE6–7）有个顽疾：即使写了 outline: none 和 hidefocus="true"，只要 JS 主动调用了 .focus()，虚线框就会重现。
临时解法（慎用）：
- 加属性
hidefocus="true"到 button 标签上 - 再配
onfocus="this.blur()"强制失焦 —— 但这会破坏 Tab 键导航，仅限无键盘操作需求的场景
现代项目基本不用考虑这点，但若维护遗留系统，得留意这个交互陷阱。
最容易被忽略的是：哪怕所有 CSS 都写对了，只要漏掉 -webkit-appearance: none 或 ::-moz-focus-inner，在对应浏览器里就一定会露出“影子边框”。不是 bug，是浏览器默认样式分层生效的结果。
