热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

uni-app解决小程序圆角样式不生效

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

 


推荐阅读
author-avatar
chnger
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有