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

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

现在，一些好消息：您可能能够使用-webkit-mask和SVG圈子来使用Webkit。此页面上有一个示例：http://www.webkit.org/blog/181/css-masks/

这将在Firefox，Safari和（希望）Chrome下获得支持。（显然IE9，因为你刚刚测试过它！）对于所有人来说，这是你通常希望实现的最好的CSS3黑客。 ; - ）

Google地图上的透明圆角

1 个答案: