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

Question

如何在Chrome/Opera中使CSS 3圆角隐藏溢出我需要圆角上的父母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)中的另一个bug，但它可以工作。您所需要做的就是添加一个WebKit CSS掩码到#Wrapper元素。您可以使用单个像素的PNG图像，甚至可以将其包含到CSS中以保存HTTP请求。JSFiddle示例

#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示例