button默认边框和阴影清不干净因各浏览器UA样式硬编码差异：Chrome设内边距和浅灰边框，Firefox加box-shadow和margin，Safari依赖-webkit-appearance并自带圆角、内阴影；仅设border: none或box-shadow: none无效，必须组合-appearance前缀（-webkit-appearance: none;-moz-appearance: none;appearance: none）并显式声明border: none;background: transparent;padding: 0;margin: 0;line-height: 1，再配合normalize.css及后续补丁如border-radius: 0、box-shadow: none、focus轮廓重置等。
button 默认边框和阴影为什么清不干净
因为浏览器 UA 样式对 button 的处理根本不是“统一设个 border 和 box-shadow”，而是各自硬编码：Chrome 默认带约 6px 内边距和浅灰 border，Firefox 加了 box-shadow 和额外 margin，Safari 死守 -webkit-appearance: button 并自带圆角、内阴影、甚至忽略 font-size 继承。只写 border: none 或 box-shadow: none，等于没碰到底层渲染开关。
必须同时写的 appearance 前缀组合
appearance 是真正关掉原生外观控制权的关键，但单写一个值必然漏浏览器：
-
-webkit-appearance: none放最前（覆盖 Safari 15.3– 和 Chrome） -
-moz-appearance: none紧跟（覆盖 Firefox 88 及更早） -
appearance: none放最后（现代标准，也兼容当前主流版本）
漏掉任意一项，Safari 里按钮仍带圆角阴影，Firefox 旧版里文字可能被压扁，Edge 某些版本边框照常显示。
appearance 之后必须显式声明的视觉属性
appearance: none 只移交控制权，不重置视觉。以下四条缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
border: none——否则 Safari 仍用系统默认1px solid边框 -
background: transparent——否则 Firefox 保留浅灰背景色 -
padding: 0和margin: 0——各浏览器默认值差异极大，padding从2px到8px都有 -
line-height: 1——防止 Safari 中文字上下留白异常，导致高度突兀
另外建议加 font: inherit 和 vertical-align: middle，避免 inline 场景下文字偏上或按钮错位。
normalize.css 能省事，但不能全靠它
normalize.css 是目前最稳妥的起点：它统一了 Safari 的阴影、Firefox 的圆角、Chrome 的内边距，且保留可访问性（焦点轮廓、语义行为）。但它不等于“已重置完成”——你仍需手动补这几条：
-
button { border-radius: 0; }——Safari 和旧 Edge 默认圆角 -
button { box-shadow: none; }——Safari 桌面版默认浅灰阴影 -
button:focus { outline: 2px solid #007bff; }——原生 focus 轮廓色常不可见 -
button::-moz-focus-inner { border: 0; }——Firefox 特有伪元素，不重置会多出虚线边框
加载顺序很关键：normalize.css 必须在所有自定义 CSS 之前引入，否则你的 button { border: none; } 可能被它更宽泛的选择器覆盖；Vue/React 项目中还要防 CSS-in-JS 动态样式注入过早，把 normalize 规则压住。
