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

Question

我需要父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>

关于JSFiddle的例子

谢谢您的帮助!

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

Answer 1

我找到了解决这个问题的另一种方案 这看起来像WebKit(或可能是Chrome)中的另一个错误,但它确实有效.您需要做的就是向#wrapper元素添加WebKit CSS Mask.您可以使用单个像素的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示例

Answer 2

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

Answer 3

没关系所有人,我设法通过在包装器和盒子之间添加一个额外的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/

Answer 4

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

Answer 5

似乎这个工作:

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

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

Answer 6

支持最新的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/!

Answer 7

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

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