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

Question

我需要有1个外部div，其位置为：absolute和border-radius。 在外部div中，我可能有一个或多个内部位置：绝对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;。