Css 谷歌地图上的透明圆角

我需要把我的谷歌地图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>

是的，我知道，我可以用一些背景色的叠加图像。但真正的问题是背景不仅仅是颜色。它根据内容而变化，通常是渐变。有没有一种方法可以让Chrome和其他基于wabkit的浏览器和Opera我不希望IE能像FF那样渲染它

UPD：刚刚在IE9中测试过，它呈现OK。webkit和Opera有什么问题

---

UPD2：我使用了OverZeous的andwer，发现它只在Safari中有效。Chrome仅支持PNG掩码，Opera根本不是webkit。需要更多想法

您可能遇到了与此处所述相同的Webkit错误：

这里也有：

我通过一个调试器来测试这一点，修改您的代码，向具有边框半径的节点添加可见边框，然后隐藏内容。它清楚地显示了外部元素的圆圈。由于Safari和Chrome都使用Webkit，这就可以解释这些问题。然而，在Opera内部测试时，我似乎看到了相同的错误

现在，有一些好消息：您可以使用-Webkit-mask和SVG循环让Webkit正常工作。本页上有一个示例：

---

这将得到Firefox、Safari和Chrome的支持。显然是IE9，因为你刚刚测试过它！对于所有人来说，这大概是CSS3黑客通常希望达到的最好成绩-

您可能遇到了与此处所述相同的Webkit错误：

这里也有：

我通过一个调试器来测试这一点，修改您的代码，向具有边框半径的节点添加可见边框，然后隐藏内容。它清楚地显示了外部元素的圆圈。由于Safari和Chrome都使用Webkit，这就可以解释这些问题。然而，在Opera内部测试时，我似乎看到了相同的错误

现在，有一些好消息：您可以使用-Webkit-mask和SVG循环让Webkit正常工作。本页上有一个示例：

---

这将得到Firefox、Safari和Chrome的支持。显然是IE9，因为你刚刚测试过它！对于所有人来说，这大概是CSS3黑客通常希望达到的最好成绩-

你的链接是到localhost的，这没有多大帮助。不幸的是，你的链接已失效。我想把这个给我的客户看，作为概念的证明。。。你能帮忙吗？刚刚更新了帖子中的链接。看看最底部，应该有两张地图。或者在这个页面上：有人找到了一个在Opera中运行的答案吗？一个问题是，你用这种方式掩盖了Google徽标，这违反了服务条款。你的链接是本地主机-这没有多大帮助。不幸的是，你的链接死了。我想把这个给我的客户看，作为概念的证明。。。你能帮忙吗？刚刚更新了帖子中的链接。看看最底部，应该有两张地图。或者在这个页面上：有人得到了一个在Opera中工作的答案吗？一个问题是你用这种方式掩盖了Google徽标，这违反了服务条款。你太棒了！我今天过得很愉快！谢谢。meNice在Webkit的面具上找到了太多要学习的东西。顺便说一句，Opera不是Webkit浏览器，这是一个打字错误-它应该是Safari。Opera不是Webkit浏览器，它现在是！你太棒了！我今天过得很愉快！谢谢。meNice在Webkit的面具上找到了太多要学习的东西。顺便说一句，Opera不是Webkit浏览器，这是一个打字错误-它应该是Safari。Opera不是Webkit浏览器，它现在是！