作者：chnger | 来源：互联网 | 2023-09-16 16:57
在使用uni-app实现小程序的时候，设置左图的右圆角不生效，样式也都没有问题，在模拟器上也可以正常现实，手机上样式出现差别，现有以下解决方法：设置整个圆角，然后左边使用marg
在使用uni-app实现小程序的时候，设置左图的右圆角不生效，样式也都没有问题，在模拟器上也可以正常现实，手机上样式出现差别，现有以下解决方法：
设置整个圆角，然后左边使用margin-left：-30upx，隐藏左边多余的圆角
代码如下：
<cover-view class="video-mask-btn">
<cover-view class="video-mask-btn-left">
视频步骤
cover-view>
<cover-view class="video-mask-btn-right">
图片步骤
cover-view>
cover-view>
.video-mask-btn-left,.video-mask-btn-right {
width: 180upx;
height: 60upx;
line-height: 60upx;
background: rgba(0,0,0,0.4);
text-align: center;
color: #FFFFFF;
font-size: 35upx;
border-radius: 30upx;
}
.video-mask-btn-left {
padding-left: 30upx;
margin-left: -30upx;
}
.video-mask-btn-right {
padding-right: 30upx;
margin-right: -30upx;
}
.video-mask-btn-left {
padding-left: 30upx;
margin-left: -30upx;
}
.video-mask-btn-right {
padding-right: 30upx;
margin-right: -30upx;
}
京公网安备 11010802041100号