uniapp的button为什么有border怎么去掉

在uniapp中使用button组件时，发现默认带有边框，尝试通过设置border:0或border:none都无法去除。请问如何彻底去掉button的边框样式？需要修改哪个CSS属性或配置文件？

2 回复

在button组件中添加border: none;或border: 0;样式即可去掉边框。


在 UniApp 中，Button 组件默认带有边框，这是由小程序或 H5 平台的默认样式导致的。要去掉边框，可以通过以下方法实现：

方法 1：使用 border 属性

在 Button 组件上直接设置 border 属性为 "none" 或 "0"：

<button border="none">无边框按钮</button>

或：

<button border="0">无边框按钮</button>

方法 2：使用 CSS 样式

通过内联样式或 class 自定义样式覆盖默认边框：

<button style="border: none;">无边框按钮</button>

或使用 class：

<button class="no-border-btn">无边框按钮</button>

在 CSS 中定义：

.no-border-btn {
  border: none !important;
}

注意事项：

  1. 平台差异：不同平台（如微信小程序、H5）的默认样式可能略有差异，使用 !important 可确保样式覆盖。
  2. 其他样式影响：如果边框仍未去掉，检查是否有父级样式或全局样式冲突。
  3. 按钮状态：注意处理按钮的 hover、active 状态，避免边框重新出现。

以上方法简单有效，可根据项目需求选择使用。

回到顶部