uni-app解決小程序圓角樣式不生效

 

 

 在使用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;
}