zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    SQLServer 可疑
    String与Long互转
    洛谷 P5644
    洛谷 P3783
    洛谷 P4663
    洛谷 P3438
    Atcoder Grand Contest 054 题解
    迭代器失效问题
    Solution -「CF 232E」Quick Tortoise
    Solution -「NOI 2020」「洛谷 P6776」超现实树
  • 原文地址:https://www.cnblogs.com/cap-rq/p/10967523.html
Copyright © 2011-2022 走看看