在用uni-app开发小程序时,当使用按钮button时出现灰色边框border。
去除按钮背景样式(background:none;)、去除外围边框boder为空(border:none;)还是存在,最后查资料用css伪类after处理掉了
以下是代码样式效果,大家可以复制代码测度
<template>
<view>
<button class="qwbmbutton qwbmbutton1">uni-app按钮去除背景</button>
<button class="qwbmbutton qwbmbutton2">uni-app按钮去除外框border</button>
<button class="qwbmbutton qwbmbutton3">uni-app按钮去除背景与外框border</button>
<button class="qwbmbutton qwbmbutton4">uni-app按钮去除背景与外框border加after伪类处理</button>
</view>
</template>
<style>
.qwbmbutton {color:#777;font-size:24rpx;margin:30rpx;}
.qwbmbutton1 {background:none;}
.qwbmbutton2 {border:none;}
.qwbmbutton3 {background:none;border:none;}
.qwbmbutton4 {background:none;border:none;}
.qwbmbutton4::after{border:none;}
</style>