uni-app 中 button 默认边框需通过 button::after { border: none; } 清除，因跨平台渲染层插入伪元素边框；还需重置 margin、padding、-webkit-tap-highlight-color、background-color 等，并在小程序中配合 plain="true" 属性。
button 组件在 uni-app 中的默认边框不是用 border: none 或 outline: none 就能直接干掉的——这是跨平台渲染层加的伪元素边框，必须针对 ::after 伪类下手。
为什么直接写 border: none 没用
uni-app 的 button 在微信小程序、App（5+）和部分 H5 环境下，底层会自动插入一个 button::after 伪元素，用来绘制那个“若有若无但死活删不掉”的浅色边框（常为 #c0c0c0 或透明灰）。这个边框独立于你写的 CSS 规则，优先级更高。
- 即使你写了
button { border: none; outline: none; }，它依然存在 - 不同平台表现不一致：H5 可能只在 focus 时闪一下，小程序里是常驻的
- 真机调试时用 Chrome DevTools 或微信开发者工具的“元素检查”，能看到
::after节点带border
正确写法：强制清空 ::after 边框
必须显式重置伪元素的边框，且推荐用 border: none 而非 border: 0（部分平台对 0 解析不一致）。
button::after {
border: none;
}
- 放在全局样式（如
app.vue的<style></style>）或页面级<style scoped></style>均可生效 - 如果用了
scoped，需加深度选择器：button::after { border: none; }+:deep(button::after) { border: none; }（Vue 3 setup 语法下） - 别漏掉
margin和padding重置，否则按钮尺寸仍可能被撑开：button { margin: 0; padding: 0; }
配套处理：避免点击态和背景干扰
光去边框还不够，用户点击时还可能出现灰色遮罩、默认背景色或圆角残留：
- 禁用点击高亮：
button { -webkit-tap-highlight-color: transparent; } - 清空背景：
button { background-color: transparent; }（注意：小程序中background-color: none无效，只能用transparent） - 圆角归零（如需完全无修饰）：
button { border-radius: 0; }，但注意部分平台（如 iOS App）可能忽略此声明，得配合原生层配置 - 微信小程序额外加：
plain="true"属性（<button plain></button>），它会关闭默认背景+边框+阴影，比纯 CSS 更可靠
容易被忽略的兼容性细节
不同平台对同一段样式响应差异大，尤其在旧版基础库或低版本 WebView 上：
- H5 端：
::after边框有时会随box-sizing改变位置，建议统一设box-sizing: border-box - 微信小程序：必须用
plain属性 +::after双保险，单靠 CSS 容易在 iOS 微信里失效 - App 端（5+）：某些 Android 原生渲染层会把
button当作系统控件，CSS 重置后仍可能有微弱描边，此时需改用<view></view>+@click模拟按钮行为 - 别在
scoped样式里只写button::after就以为万事大吉——它很可能没穿透到组件内部，一定要验证真机效果
