Google地图上的透明圆angular
我需要使我的谷歌地图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中testing，并呈现OK。 webkit和Opera有什么问题？
UPD 2：我使用了OverZealous的andwer，并发现它只能在Safari中使用。 Chrome仅支持PNG掩码，Opera根本不是webkit。 任何更多的想法是必要的
看起来您可能遇到了与此处所述相同的Webkit错误： 如果位置为：相对，则圆angular不能切断webkit浏览器中的内容
也在这里： CSS3的边界半径裁剪问题
我testing了这个（通过debugging器）修改你的代码添加一个可见的边界到边界半径的节点，然后隐藏内容。 它清楚地显示了外部元素的一个圆圈。 由于Safari和Chrome都使用Webkit，因此可以解释这些。 但是，在Opera里面testing的时候，我好像也看到了同样的错误。
现在有一个好消息：你可能可以让Webkit使用-webkit-mask和一个SVG循环。 这个页面上有一个例子： http : //www.webkit.org/blog/181/css-masks/
这将得到你在Firefox，Safari，和（希望）Chrome的支持。 （显然，IE9，因为你只是testing它！），对于所有的帐户，是关于最好的，你通常希望实现的CSS3黑客。 😉
