Google地图上的透明圆角 [英] Transparent rounded corners on Google Map
问题描述
我需要将Google地图V3设为完整的圆圈。我使用CSS3边框半径，但它只能在Firfox正确工作，其他人只是保持矩形。以下是代码：
I need to make my google map V3 a full circle. I use CSS3 border radius on it, but it works correctly in Firfox only, others just leave it rectangular. Here are the codes:
<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的方式相同？
Yes, I know, I could use some overlay images with background color. But the real problem is that background is not only-color. It changes based on its content, and usually is a gradient. Is there a way to make Chrome and other wabkit-based browsers and Opera (I don't have any hopes about IE) to render it same way as FF does?
我的网站。查看页面的底部。刚刚在IE9中测试的
My site. Look to the very bottom of the page.
UPD：
UPD 2：我使用了OverZealous的andwer，并发现它只能在Safari中使用。 Chrome只讨论PNG面具，Opera根本不是webkit。需要更多的想法
UPD 2: I used OverZealous's andwer and figured out that it works only in Safari. Chrome assepts PNG masks only, Opera is not webkit at all. Any more ideas are needed
推荐答案
看起来您可能遇到了相同的Webkit错误，如下所示：有限的角落无法切断webkit浏览器中的内容如果位置：相对
It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative
也在这里： CSS3 border-radius clipping issues
我通过（通过调试器）测试了这个问题，修改你的代码，为边界半径节点添加一个可见边框，然后我隐藏的内容。它清楚地显示了外部元件的圆。由于Webkit在Safari和Chrome中都使用，这将解释这些。然而，当在Opera内部测试它时，我似乎看到了同样的错误。
I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.
现在，一些好消息：你可能能够使Webkit使用 -webkit-mask 和一个SVG圆圈。此页面上有一个示例： http://www.webkit.org/blog/181/css-masks /
Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/
这样可以在Firefox，Safari和（希望的）Chrome下获得支持。 （显然是IE9，因为你只是测试它！）其中，对于所有的帐户，是关于你通常希望实现CSS3黑客最好的。 ; - ）
This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. ;-)
这篇关于Google地图上的透明圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
