移动端按钮的蓝色边框和圆角源于iOS Safari等浏览器的user agent样式干预，需用-webkit-appearance: none重置外观，并配合outline: none、-webkit-tap-highlight-color: transparent及手动补全border、padding等基础样式才能彻底解决。
移动端按钮为什么会有蓝色边框和圆角
这是 iOS Safari 和部分 Android 浏览器对 <button> 的默认样式干预，不是 CSS 继承来的，而是用户代理样式表（user agent stylesheet）强制应用的。尤其在点击后出现的蓝色轮廓（:focus outline），以及 iOS 上的浅灰背景和圆角，会干扰自定义设计。
-webkit-appearance: none 是关键开关
必须显式重置外观才能真正“移除默认”，仅靠 background、border 或 border-radius 不够——浏览器仍可能保留内部渲染逻辑。
-
-webkit-appearance: none是最直接有效的声明，适用于 iOS Safari、Chrome for Android 等 WebKit 内核浏览器 - Firefox 需要额外加
appearance: none（无前缀），但目前兼容性已较好，可一起写 - 务必搭配
outline: none，否则聚焦时仍可能显示系统级焦点环（尤其在键盘导航场景） - 重置后需手动补全基础样式，例如
border: 1px solid #ccc、background: transparent，否则按钮可能“消失”
别漏掉 :active 和 :focus 的状态重置
移动端点击有延迟反馈，且部分浏览器对 :active 会叠加灰色遮罩（tap highlight），不处理会导致视觉跳变或误触感。
- 用
-webkit-tap-highlight-color: transparent去掉点击高亮（仅 WebKit） -
:active下建议设transform: scale(0.98)或opacity: 0.8提供明确反馈，避免“没点上”的错觉 -
:focus不建议完全删掉可访问性焦点，若必须隐藏，请确保提供替代焦点样式（如box-shadow） - 注意：iOS 15+ 对
outline: none更严格，某些情况下需配合outline-offset: -2px才能彻底消除残留
真机测试时容易忽略的兼容细节
模拟器常骗人。iOS 旧版本（如 iOS 12）、某些国产浏览器（QQ 浏览器 X5 内核）对 appearance 支持不稳定，甚至忽略 transparent 背景。
立即学习“前端免费学习笔记（深入）”；
- 在
<button>上加type="button"，防止表单提交意外触发（尤其嵌套在<form>中） - Android WebView（尤其低版本）可能需要
touch-action: manipulation来禁用双击缩放干扰点击 - 如果按钮内含图标（SVG/IMG），记得设
vertical-align: middle，否则基线对齐错位在移动端更明显 - 不要依赖
user-select: none来防误选——它不影响点击行为，且部分安卓浏览器不响应
-webkit-appearance: none 却忘了 outline 和 tap-highlight-color，结果 QA 在 iPhone 上点三下才反应过来“这按钮好像卡了”。 
