问题
想使用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;
}