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

我需要父 div 上的圆角来掩盖其子节点的内容。overflow: hidden可以在简单的情况下工作，但是在基于 webkit 的浏览器和 Opera 中，当父节点处于相对或绝对的位置时，overflow: hidden就会中断。

这在 Firefox 和 IE9中是可行的:

CSS

#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
}


#box {
width: 300px;
height: 300px;
background-color: #cde;
}

超文本标示语言

<div id="wrapper">
<div id="box"></div>
</div>

JSFiddle 上的示例

谢谢你的帮助！

更新: 导致这个问题的 bug 已经在 Chrome 中修复了，但是我还没有重新测试 Opera 或 Safari。

125646 次浏览
小开

看看我是怎么做到的: Jsfiddle

通过我输入的代码，我设法让它在 Webkit (Chrome/Safari)和 Firefox 上工作。我不知道它是否适用于最新版本的 Opera。是的，它在最新版本的 Opera 下工作。

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}


#box {
width: 300px; height: 300px;
background-color: #cde;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-o-border-radius: 100px;
}
小开
最佳答案

不用担心每个人，我设法通过在包装器和盒子之间添加一个附加的 div 来解决这个问题。

CSS

#wrapper {
position: absolute;
}


#middle {
border-radius: 100px;
overflow: hidden;
}


#box {
width: 300px; height: 300px;
background-color: #cde;
}

超文本标示语言

<div id="wrapper">
<div id="middle">
<div id="box"></div>
</div>
</div>

谢谢所有帮忙的人！

→ http://jsfiddle.net/5fwjp/

小开

我找到了解决这个问题的另一个办法。这看起来像是 WebKit (或者可能是 Chrome)中的另一个 bug，但是它能工作。您所需要做的就是向 # 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 */
-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>

小开

没有答案，但是这是 Chromium 下面的一个文件错误来源: Http://code.google.com/p/chromium/issues/detail?id=62363

不幸的是，看起来没有人在做这件事

小开

基于灰乌鸦的绝妙回答。

这里有一个更现实的例子，有两个圆形 div 与一些填充内容。我将硬编码的 png 背景替换为一个十六进制值，即。

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

取而代之的是

-webkit-mask-image:#fff;

看这个 JSFiddle... http://jsfiddle.net/hqLkA/

小开

对我来说，没有一个解决方案是有效的，只有使用:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

在包装器元素上完成了这项工作。

这里的例子: http://jsfiddle.net/gpawlik/qWdf6/74/

小开

看来这个管用:

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

Http://jsfiddle.net/qwdf6/82/

小开

添加一个 z 索引到您的边界半径的项目，它将掩盖内部的东西。

小开

用边框改变父元素的不透明度，这将重新组织堆叠的元素。经过几个小时的研究和失败的尝试，这个方法奇迹般地奏效了。只需添加0.99的不透明度就可以重新组织浏览器的绘制过程。看看 http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

小开

如果您想为图像创建一个掩码并将图像放置在容器中，请不要设置“ position: Absol”属性。你所要做的就是改变左边距和右边距。Chrome/Opera 将遵守溢出: 隐藏和边界半径规则。

// Breaks in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
position: absolute;
left: 20px;
right: 20px;
}
}


// Works in Chrome/Opera.
.container {
overflow: hidden;
border-radius: 50%;
img {
margin-left: 20px;
margin-right: 20px;
}
}
小开

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

小开

支持最新的铬合金，歌剧和狩猎，你可以这样做:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

你绝对应该检查工具 http://bennettfeely.com/clippy/！


提交答案