想使用button
自带的disable
属性和效果,但又不需要button
显示边框线
button
控件有一条淡灰色的边框,在控件上了样式 border-radius: 0;
无法让button
边框隐藏
代码如下:
.tx-btn {
z-index: 99;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color: #fff;
background-color: #4abdcc;
border-radius: 0;/*一般使用这个就是可以去掉边框了*/
}
解决前效果
解决方案
发现button
控件有一个伪元素(::after)
,这伪元素有border
属性,默认为 border:1px solid rgba(0, 0, 0, 0.2)
所以border:none
属性是有效果的,只是被button::after
覆盖了,把button::after
的border
属性设置为none
或0
即可
代码如下:
.tx-btn {
z-index: 99;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 28rpx;
color: #fff;
background-color: #4abdcc;
border-radius: 0;
}
button[class="tx-btn"]::after {
border: 0;
}
解决后效果
网友评论