小程序button控件上下边框的显示和隐藏

本文主要是介绍小程序button控件上下边框的显示和隐藏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题

想使用button自带的loading图标功能，但又不需要button显示边框线

button控件有一条淡灰色的边框，在控件上了样式 border:none; 无法让button边框隐藏
代码如下：

<button class="btn">.btn{border:none; /*一般使用这个就是可以去掉边框了*/
}

解决方案

发现button控件有一个伪元素（::after），这伪元素有border属性，默认为 border:1px solid rgba(0, 0, 0, 0.2)

所以border：none属性是有效果的，只是被button::after 覆盖了，把button::after 的border 属性设置为none或0即可

代码如下：

/*去掉按钮边框*/button[class="btn"]::after {border: 0;
} 

这篇关于小程序button控件上下边框的显示和隐藏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---