如何让CSS3圆角在Chrome/Opera中隐藏溢出
如何让CSS3圆角在Chrome/Opera中隐藏溢出
提问于 2011-04-21 04:53:19
我需要父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。
回答 11
Stack Overflow用户
回答已采纳
发布于 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>感谢所有帮助过我们的人！
Stack Overflow用户
发布于 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>
Stack Overflow用户
发布于 2014-08-08 22:37:49
将z索引添加到您的边界半径项目中，它将屏蔽其中的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5736503
复制相关文章
相似问题
腾讯云开发者
