html - 边框半径在 Safari 5 中不起作用

Question

我需要有 1 个带有 position:absolute 和 border-radius 的外部 div。 在外部 div 内部，我可能有 1 个或多个内部position:absolute div。 我希望内部 div 位于外部 div 的边界半径内 (例如:top:0px; left:0px;) 不会隐藏外部 div 的 border-radius。

此行为在除 Safari 之外的所有浏览器中都可以正常工作。

我需要在 Safari 5 以及 6 和 7 中支持这种行为。 我见过一些使用 -webkit-mask-image 的解决方案，但它们都不适用于 Safari 5。

这是我要显示的 html 示例:

<div style="position:absolute; background:blue; width:300px; height:300px; border-radius:30px; overflow:hidden;">
    <div style="position:absolute; background:red; width:200px; height:200px;"></div>
</div>

有什么想法吗？

Answer 1

在第二个 div 中使用 border-radius: inherit;。