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

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

---

我发现了另一个解决这个问题的方法 这看起来像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示例

---

将z-index添加到边界半径的项目中，并将掩盖其中的内容。

---

Nevermind everyone，我设法通过在包装盒和包装盒之间添加额外的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/

链接地址: http://www.djcxy.com/p/65251.html

上一篇: How to make CSS3 rounded corners hide overflow in Chrome/Opera

下一篇: How do I bind a Pyglet sprite with a Pymunk shape so they rotate together?