Html 如何让 CSS3 圆角隐藏 Chrome/Opera 中的溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5736503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make CSS3 rounded corners hide overflow in Chrome/Opera
提问by jmotes
I need round corners on a parent div to mask content from its childen. overflow: hiddenworks in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely.
我需要父 div 上的圆角来掩盖其子级的内容。overflow: hidden在简单的情况下工作，但当父级相对或绝对定位时，会在基于 webkit 的浏览器和 Opera 中中断。
This works in Firefox and IE9:
这适用于 Firefox 和 IE9：
CSS
CSS
#wrapper {
width: 300px;
height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute;
}
#box {
width: 300px;
height: 300px;
background-color: #cde;
}
HTML
HTML
<div id="wrapper">
<div id="box"></div>
</div>
Thanks for the help!
谢谢您的帮助！
UPDATE:The bug causing this issue has been since fixed in Chrome. I have not re-tested Opera or Safari however.
更新：导致此问题的错误已在 Chrome 中修复。但是，我还没有重新测试 Opera 或 Safari。
采纳答案by jmotes
Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.
没关系，我设法通过在包装器和盒子之间添加一个额外的 div 来解决这个问题。
CSS
CSS
#wrapper {
position: absolute;
}
#middle {
border-radius: 100px;
overflow: hidden;
}
#box {
width: 300px; height: 300px;
background-color: #cde;
}
HTML
HTML
<div id="wrapper">
<div id="middle">
<div id="box"></div>
</div>
</div>
Thanks everyone who helped!
感谢所有帮助过的人！
回答by graycrow
I found another solution for this problem. This looks like another bug in WebKit (or probably Chrome), but it works. All you need to do - is to add a WebKit CSS Maskto the #wrapper element. You can use a single pixel png image and even include it to the CSS to save a HTTP request.
我为这个问题找到了另一个解决方案。这看起来像是 WebKit（或可能是 Chrome）中的另一个错误，但它确实有效。您需要做的就是将WebKit CSS 掩码添加到 #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;
}?
回答by Hymanolai
Add a z-index to your border-radius'd item, and it will mask the things inside of it.
将 z-index 添加到您的边框半径项，它将掩盖其中的内容。
回答by flavi1
opacity: 0.99; on wrapper solve webkit bug
不透明度：0.99；在包装上解决 webkit 错误
回答by nakrill
Seems this one works:
似乎这个有效：
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
回答by antoni
Supported in latest chrome, opera and safari, you can do this:
在最新的 chrome、opera 和 safari 中支持，您可以这样做：
-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);
You should definitely check out the tool http://bennettfeely.com/clippy/!
您绝对应该查看该工具http://bennettfeely.com/clippy/！
回答by ryan
Not an answer, but this is a filed bug under the Chromium source: http://code.google.com/p/chromium/issues/detail?id=62363
不是答案，但这是 Chromium 源下提交的错误：http: //code.google.com/p/chromium/issues/detail?id=62363
Unfortunately, doesn't look like there's anyone working on it. :(
不幸的是，看起来没有人在做这件事。:(
回答by Rami Awar
change the opacity of the parent element with the border and this will re organize the stacked elements. This worked miraculously for me after hours of research and failed attempts. It was as simple as adding an opacity of 0.99 to re organize this paint process of browsers. Check out http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
使用边框更改父元素的不透明度，这将重新组织堆叠元素。经过数小时的研究和失败的尝试，这对我来说奇迹般地起作用。就像添加 0.99 的不透明度来重新组织浏览器的绘制过程一样简单。查看http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
回答by Grzegorz Pawlik
As for me none of the solutions worked well, only using:
至于我，没有一个解决方案效果很好，只使用：
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
on the wrapper element did the job.
在包装元素上完成了这项工作。
Here the example: http://jsfiddle.net/gpawlik/qWdf6/74/
回答by gts101
based on graycrow's excellent answer...
基于graycrow的出色回答......
Here's a more real world example that has two cicular divs with some filler content. I replaced the hard-coded png background with just a hex value, i.e.
这是一个更真实的例子，它有两个带有一些填充内容的圆形 div。我只用一个十六进制值替换了硬编码的 png 背景，即
-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
is replaced with
被替换为
-webkit-mask-image:#fff;
See this JSFiddle... http://jsfiddle.net/hqLkA/
看到这个 JSFiddle ... http://jsfiddle.net/hqLkA/
