Google地图上的透明圆角

Question

我需要使我的Google Map V3变成一个完整的圆圈。我在其上使用CSS3边界半径，但仅在Firfox中可正常使用，其他人则将其保留为矩形。以下是代码：

<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
        <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
            ...
        </div>
    </div>
</div>

和CSS：

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

是的，我知道，我可以使用一些具有背景色的叠加图像。但是真正的问题是背景不仅是彩色的。它根据其内容而变化，通常是一个渐变。有没有办法使Chrome和其他基于wabkit的浏览器和Opera（我对IE没有希望）以与FF相同的方式呈现它？

UPD： 刚刚在IE9中进行了测试，并且可以正常显示。Webkit和Opera怎么了？

UPD 2：
我使用了OverZealous的andwer，发现它仅在Safari中有效。Chrome仅支持PNG蒙版，Opera完全不是webkit。需要更多的想法

Answer 1

我通过（通过调试器）修改代码以在具有边界半径的节点上添加可见边界来测试此代码，然后隐藏内容。它清楚地显示出外部元素的圆圈。由于Safari和Chrome中都使用了Webkit，因此可以对它们进行解释。但是，在Opera中对其进行测试时，似乎会看到相同的错误。

现在，有个好消息：您可能可以使用-webkit-maskSVG圈子使Webkit正常运行。

这样可以在Firefox，Safari和（希望）Chrome下获得支持。（显然是IE9，因为您刚刚对其进行了测试！）对于所有帐户而言，这通常是您通常希望为CSS3黑客实现的最佳水平。;-)