谷歌地图上的透明圆角

Question

我需要让我的谷歌地图 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 相同的方式呈现它？

My site. Look to the very bottom of the page.

UPD: 刚刚在 IE9 中测试过，渲染正常。 webkit 和 Opera 有什么问题？

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

Answer 1

您似乎遇到了与此处所述相同的 Webkit 错误：Rounded corners fail to cut off content in webkit browsers if position:relative

也在这里：CSS3 border-radius clipping issues

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

现在，有一个好消息：您可以使用-webkit-mask 和 SVG 圆圈让 Webkit 运行。此页面上有一个示例：http://www.webkit.org/blog/181/css-masks/

这将使您在 Firefox、Safari 和（希望如此）Chrome 下获得支持。 （显然是 IE9，因为您刚刚测试过它！）对于所有帐户，这大约是您通常希望实现的 CSS3 hack 的最佳效果。 ;-)