谷歌地图上的透明圆角 [英] Transparent rounded corners on Google Map

问题描述

我需要让我的谷歌地图 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%;">...

和 CSS:

.map.mapCircle {宽度:476px；高度:476px；}.mapCircle>div>div:first-child {-moz-border-radius: 238px;-webkit-border-radius: 238px;边界半径:238px；}

是的，我知道，我可以使用一些带有背景颜色的叠加图像.但真正的问题是背景不仅仅是颜色.它根据其内容而变化，通常是渐变的.有没有办法让 Chrome 和其他基于 wabkit 的浏览器和 Opera(我对 IE 没有任何希望)以与 FF 相同的方式呈现它?

我的网站.查看页面的最底部.

UPD: 刚刚在 IE9 中进行了测试，显示正常.webkit 和 Opera 有什么问题?

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

解决方案

您似乎遇到了与此处所述相同的 Webkit 错误:圆角无法切断 webkit 浏览器中的内容，如果 position:relative

也在这里:CSS3 边框半径裁剪问题

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

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

这会让您在 Firefox、Safari 和(希望如此)Chrome 下获得支持.(显然是 IE9，因为您刚刚测试了它！)对于所有帐户来说，这大约是您通常希望为 CSS3 hack 实现的最佳目标.;-)

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>

and CSS:

.map.mapCircle {
    width: 476px;
    height: 476px;
}
.mapCircle>div>div:first-child {
    -moz-border-radius: 238px;
    -webkit-border-radius: 238px;
    border-radius: 238px;
}

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?

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

UPD: just tested in IE9, and it renders OK. What's wrong with the webkit and Opera?

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

解决方案

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

Also here: CSS3 border-radius clipping issues

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.

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/

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. ;-)

这篇关于谷歌地图上的透明圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！