如何使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）中的另一个错误，但它的工作原理。所有你需要做的就是将WebKit CSS Mask添加到#wrapper元素中。你可以使用单个像素的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每个人，我设法通过在包装和盒子之间添加额外的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/

不透明度：0.99; 在包装解决webkit的错误

似乎这个工程：

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

http://jsfiddle.net/qWdf6/82/

不是答案，但是这是Chromium源下的一个存档错误： http : //code.google.com/p/chromium/issues/detail?id=62363

不幸的是，看起来不像有人在做这件事。 🙁

在最新的chrome，opera和safari中支持，你可以这样做：

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

你一定要看看工具http://bennettfeely.com/clippy/ ！

用边框改变父元素的不透明度，这将重新组织堆叠的元素。经过几个小时的研究和失败的尝试，这个奇迹般地为我工作。就像添加0.99的不透明度来重新组织浏览器的绘制过程一样简单。看看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

基于灰色的优秀答案…

这里有一个更现实的例子，有两个带有填充内容的圆形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/

这里看看我是如何做到的; 的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; }

如果您正在为图像创建遮罩并将图像放置在容器中，请不要设置“position：absolute”属性。你所要做的就是改变左边距和右边距。 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; } }

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

使用CSS创建圆角