CSS 有边界半径覆盖内部 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1280339/
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
Have border-radius cover inner divs
提问by Brandon Wang
I have a Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.
我在一个网页上有一个 Coda 滑块（手工制作，不使用插件，但这无关紧要）并且外部 div 有一个边界半径。
A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.
一堆内部 div 具有背景颜色，但是当我希望它们位于圆角后面时，它们会突出到角落的顶部。
Is there any way to achieve this?
有没有办法实现这一目标？
采纳答案by robertc
I found that WebKit would crop everything if I put overflow: hiddenon the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.
我发现如果我穿上overflow: hidden这个元素，WebKit 会裁剪所有内容，但 Gecko 不会（有关代码和屏幕截图，请参阅我的博客文章）。我在 Gecko 中能做的最好的事情是在内部 div 中也放置一个边框半径，或者向包装 div 添加边距/填充，以便内部 div 位于角落下方。
回答by blu42media
If you apply position:static to the element with overflow:hidden you will achieve the results you are looking for.
如果您将 position:static 应用到带有 overflow:hidden 的元素，您将获得您正在寻找的结果。
Check this out: overflow:hidden, border-radius and position:absolute
看看这个：溢出：隐藏，边界半径和位置：绝对
