我需要父div上的圆角来屏蔽它的子级内容。overflow: hidden
在简单的情况下工作,但在基于webkit的浏览器和Opera中,当父级相对或绝对定位时会中断。
这在火狐和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>
谢谢你的帮助!
更新:导致这个问题的bug 已经在Chrome中修复了。然而,我没有重新测试Opera或Safari。
发布于 2011-04-21 23:12:58
不管大家,我设法通过在包装器和盒子之间添加一个额外的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>
感谢所有帮助过我们的人!
发布于 2012-04-24 18:37:14
我为这个问题找到了另一个解决方案。这看起来像是WebKit中的另一个bug (或者可能是Chrome),但它是有效的。您所需要做的就是向# 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 */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}
<div id="wrapper">
<div id="box"></div>
</div>
发布于 2014-08-08 22:37:49
将z索引添加到您的边界半径项目中,它将屏蔽其中的内容。
https://stackoverflow.com/questions/5736503
复制相似问题