让边界半径覆盖内部 div答案

【问题标题】：Have border-radius cover inner divs让边界半径覆盖内部 div
【发布时间】：2010-11-19 19:15:37
【问题描述】：

我在一个网页上有一个 Coda 滑块（手工制作，不使用插件，但这无关紧要），外部 div 有一个边框半径。

一堆内部 div 有背景颜色，但是当我希望它们位于圆角的后面时，它们会突出在角落的顶部。

有什么办法可以做到吗？

【问题讨论】：

它与 Firefox 3.6.11 一起使用溢出：隐藏。
在 3.6.14 中不适合我。你在什么操作系统上？ the image on this page 有圆角还是方角？

标签： css

【解决方案1】：

我发现如果我将 overflow: hidden 放在元素上，WebKit 会裁剪所有内容，但 Gecko 不会（请参阅 my blog post for code and screenshots）。我在 Gecko 中能做的最好的事情就是在内部 div 中也放置一个边框半径，或者在包装 div 中添加一个边距/填充，以便内部 div 位于角落下方。

【讨论】：

那么这是唯一的方法吗？
我怀疑 Gecko 真的应该尊重溢出：隐藏，但它还没有完全实现。不过，在规范最终确定之前，这两种方式都很难说。
我在 MDC wiki 上提出了一个问题，Jürgen Jeka 指出了缺陷：bugzilla.mozilla.org/show_bug.cgi?id=459144
找到了一种在 Firefox 中使用 SVG 裁剪获得圆角的方法：boogdesign.com/b2evo/index.php/2009/09/02/… 已在图像元素上测试，应该适用于任何内容。
在 IE10 开发预览版中也可以使用（所以甚至可能 9 - 尚未测试）

【解决方案2】：

如果您将 position:static 应用于具有溢出：隐藏的元素，您将获得您正在寻找的结果。

看看这个：overflow:hidden, border-radius and position:absolute

【讨论】：

这恰好是原因。对我来说，一个解决方案是用 position:static （或保留默认值）将 div 包装在 position:absolute div 中。