微信小程序 去除button隐藏的边框

希望下面我的讲解对你有所帮助

首先我给大家看两张按钮的效果图

 

第一张图的wxss样式

/* 获取用户信息按钮 */
.getInfo{
  font-size: medium;
  background-color: white;
}

第二张图的wxss样式

/* 获取用户信息按钮 */
.getInfo{
  font-size: medium;
  border-radius: 50rpx;
  background-color: white;
}

       大家先看不加border-radius的效果图（第一张图），或许这个时候还我们看不出什么问题来，那行，那我们紧接着来看加了border-radius的效果图（第二张图），这个时候我们会很明显的发现第二张图的按钮外层有一层淡淡的边框，如果不仔细去放大看这个，可能还真有点发现不了（本人也是在后期检查小程序的整体效果的时候才突然发现的），这个淡淡的边框多多少少会影响小程序的美观，那要怎么来解决呢？

        或许聪明的你会想到下面的方法

/* 获取用户信息按钮 */
.getInfo{
  font-size: medium;
  border-radius: 50rpx;
  border-width: 0rpx;     
  // 效果显示有边框，那我们就把边框的大小设置为0不就可以了嘛 （想法）
  background-color: white;
}

        但是很遗憾，效果还是和第二张图一样，虽然效果没有发生什么变化，但是这种想法还是蛮好的。那怎么办呢？

        当我们发现小程序的效果和我们wxss样式相矛盾的时候，那这个时候我们就得考虑是不是这个组件有默认的样式，并且优先级比我们的样式高（或者在我们样式的后面渲染）。经过调试，我惊奇的发现下面的东西：

简单的来说就是，button这个组件它有一个伪元素-- button::after，它有默认的边框 1px，当然了，它是在我们自己定义的样式后面渲染，这也就说明了为什么在上面设置的border-width：0rpx 没有起作用（其实border-width：0rpx是被渲染了的，只是被后面的 border：1px solid rgba(0,0,0,0.2）给覆盖了）

        接下来解决方案想必大家差不多都知道了，对，那就是去修改上面伪元素（button::after）

/* 清除按钮伪元素的边框效果 */
button[class="getInfo"]::after {
  border: 0;
}

/* 获取用户信息按钮 */
.getInfo{
  font-size: medium;
  border-radius: 50rpx;
  background-color: white;
}

 效果如下：

         经过本次的学习，当下次在其他组件上发生类似的错误的时候，我们也可以尝试去调试，然后去观察一下一些默认的样式。

由于作者还在路上，所以若有不足之处，还请你在评论区里指正，谢谢！

希望上面我的讲解对你有所帮助，谢谢！