如何使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; } } 
      Interesting Posts