首页 文章

如何使CSS3圆角隐藏在Chrome / Opera中溢出

提问于
浏览
143

我需要父div上的圆角来掩盖其孩子的内容 . overflow: hidden 在简单的情况下工作,但是当父级相对或绝对定位时,基于webkit的浏览器和Opera会中断 .

这适用于Firefox和IE9:

CSS

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

Example on JSFiddle

谢谢您的帮助!

UPDATE: 导致此问题的错误已在Chrome中修复 . 我没有重新测试Opera或Safari .

12 回答

  • 54

    我找到了解决这个问题的另一种方案这看起来像WebKit(或可能是Chrome)中的另一个错误,但它确实有效 . 您需要做的就是将WebKit CSS Mask添加到#wrapper元素中 . 您可以使用单个像素的png图像,甚至可以将其包含在CSS中以保存HTTP请求 .

    #wrapper {
    width: 300px; height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    }
    
    #box {
    width: 300px; height: 300px;
    background-color: #cde;
    }​
    

    JSFiddle Example

  • 2

    将z-index添加到border-radius'd项目,它将掩盖其中的内容 .

  • 6

    没关系所有人,我设法通过在包装器和盒子之间添加一个额外的div来解决问题 .

    CSS

    #wrapper {
        position: absolute;
    }
    
    #middle {
        border-radius: 100px;
        overflow: hidden; 
    }
    
    #box {
        width: 300px; height: 300px;
        background-color: #cde;
    }
    

    HTML

    <div id="wrapper">
        <div id="middle">
            <div id="box"></div>
        </div>
    </div>
    

    谢谢大家的帮助!

    http://jsfiddle.net/5fwjp/

  • 6

    不透明度:0.99;在包装器上解决webkit bug

  • 180

    似乎这个工作:

    .wrap {
        -webkit-transform: translateZ(0);
        -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    }
    

    http://jsfiddle.net/qWdf6/82/

  • 98

    不是答案,但这是Chromium来源下提交的错误:http://code.google.com/p/chromium/issues/detail?id=62363

    不幸的是,看起来并没有人在研究它 . :(

  • 2

    支持最新的chrome,opera和safari,你可以这样做:

    -webkit-clip-path: inset(0 0 0 0 round 100px);
    clip-path: inset(0 0 0 0 round 100px);
    

    你一定要看看工具http://bennettfeely.com/clippy/

  • 15

    使用边框更改父元素的不透明度,这将重新组织堆叠元素 . 经过数小时的研究和尝试失败后,这对我来说奇迹般地起作用 . 就像添加0.99的不透明度来重新组织浏览器的绘制过程一样简单 . 退房http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  • 4

    基于graycrow的优秀答案......

    这是一个更真实的例子,它有两个带有一些填充内容的cicular div . 我用十六进制值替换了硬编码的png背景,即

    -=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    

    被替换为

    -webkit-mask-image:#fff;
    

    看到这个JSFiddle ... http://jsfiddle.net/hqLkA/

  • 0

    至于我,没有一个解决方案运作良好,只使用:

    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    

    在包装元素上完成了这项工作 .

    这个例子:http://jsfiddle.net/gpawlik/qWdf6/74/

  • 16

    看看我是怎么做到的; Jsfiddle

    通过我提供的代码,我设法让它在Webkit(Chrome / Safari)和Firefox上运行 . 我不知道它是否适用于最新版本的Opera . 是的,它可以在最新版本的Opera下运行 .

    #wrapper {
      width: 300px; height: 300px;
      border-radius: 100px;
      overflow: hidden;
      position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    }
    
    #box {
      width: 300px; height: 300px;
      background-color: #cde;
      border-radius: 100px;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      -o-border-radius: 100px;
    }
    
  • 1

    如果要为图像创建蒙版并将图像放置在容器内,请不要设置“position:absolute”属性 . 您所要做的就是更改margin-left和margin-right . Chrome / Opera将遵循溢出:隐藏和边界半径规则 .

    // Breaks in Chrome/Opera.
        .container {
            overflow: hidden;
            border-radius: 50%;
            img {
                position: absolute;
                left: 20px;
                right: 20px;
            }
        }
    
    // Works in Chrome/Opera.
        .container {
            overflow: hidden;
            border-radius: 50%;
            img {
                margin-left: 20px;
                margin-right: 20px;
            }
        }
    

相关问题