这是我在Stack上的第一个问题。我已经做了功课,并找到了像这个主题一样的东西:
在webkit浏览器中,v3谷歌地图不遵循容器的边框半径。有人有解决方法吗?
但我仍然看到这个问题...所以我来了。我正在我的一个项目中嵌入谷歌地图,并想将其剪切为圆形框架。
虽然我使用的解决方案在Chrome和Firefox上运行得非常好,但我刚刚发现,通过一些测试,Safari不会呈现“剪切”容器的边框半径,允许下面的谷歌地图内容重叠圆角。
奇怪的是,这种行为仅适用于Safari。而在Chrome上,它的效果非常好...
您可以在Safari和Chrome中打开此fiddle,您将立即发现差异(注意角落):
http://jsfiddle.net/wmcmeans/YHX6c/
MAC上的这个fiddle相当明显:尝试在不同的浏览器中打开。
这是fiddle中使用的代码结构,镜像了我在项目中使用的代码结构。
<div id="map1" class="clip">
<!--MAP GOES HERE--->
</div>
.clip {
overflow: hidden;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.55) 10px 20px 20px;
border: 1px solid red;
}
注意:如果在 .clip div 中有一个静态图像作为背景,并且正在使用 Safari Version 7.0.3,则带边框半径的剪切效果可用。
希望有人能提供一些简单的解决方法 :)
谢谢,再见。