公告列表
公告列表
收藏
回答

设置了border-radius后overflow不起作用？


但奇怪但是，在电脑上就没事，在手机上就不起作用，右侧明确写了overflow:hidden了，还加了important，还是隐藏不起来，求解！

回答关注问题邀请回答
收藏

2 个回答

  • 晴天
    晴天
    2018-07-30

    你好 这个导航栏 是你自定义的？系统的没有这种？

    2018-07-30
    有用
    回复 1
    • Mi Manchi
      Mi Manchi
      2018-07-30

      是的，是自己定义的，问题解决了，是ball的的z-index问题, 感谢回答

      2018-07-30
      赞
      回复
  • 灵芝
    灵芝
    2018-07-26

    你好，请提供出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2018-07-26
    有用
    回复 5
    • Mi Manchi
      Mi Manchi
      2018-07-26

      问题机型：iphone8，

      IOS版本：11.4

      微信版本：6.7.2


      .ball {
        display: block;
        position: relative;
        width: 320rpx;
        height: 320rpx;
        margin: 20rpx auto;
        overflow: hidden;
        border: 1px solid #1rpx;
        border-radius: 50%;
      }
       
      .water-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        z-index: 0;
      }
       
      .water1 {
        width: 1080rpx;
        height: 1000rpx;
        border-radius: 49%;
        background-color: rgba(255, 255, 255, 0.15);
        z-index: 1;
        position: absolute;
        top: 50rpx;
        left: -550rpx;
        margin-left: 50%;
        animation: rolling infinite 8s linear;
        -webkit-animation: rolling infinite 8s linear;
      }
       
      .water2 {
        width: 980rpx;
        height: 920rpx;
        border-radius: 48%;
        background-color: rgba(255, 255, 255, 0.35);
        z-index: 0;
        position: absolute;
        top: 50rpx;
        left: -450rpx;
        margin-left: 50%;
        animation: rolling infinite 6s linear;
        -webkit-animation: rolling infinite 6s linear;
      }
       
      @keyframes rolling {
        from {
          transform: rotate(0);
          -webkit-transform: rotate(0);
        }
       
        to {
          transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
        }
      }


      <view class='ball'>
          <view class='water-container' style='top:30%'>
              <view class='water1'></view>
              <view class='water2'></view>
          </view>
      </view>


      2018-07-26
      赞
      回复
    • 灵芝
      灵芝
      2018-07-26回复Mi Manchi

      请按正确格式提供代码片段（ https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html ）

      2018-07-26
      赞
      回复
    • Mi Manchi
      Mi Manchi
      2018-07-26回复灵芝

      wechatide://minicode/s38MMcm37SMU

      2018-07-26
      赞
      回复
    • 灵芝
      灵芝
      2018-07-26回复Mi Manchi

      你的.ball没有设置z-index，而.water-container设置了该值


      2018-07-26
      赞
      回复
    • Mi Manchi
      Mi Manchi
      2018-07-26回复灵芝

      非常感谢，抱歉这种睿智问题耽误您的时间   = 。=

      2018-07-26
      赞
      回复
请 登录 后发表内容
相关文档