Html Safari在div中使用谷歌地图打破边界半径

关于堆栈的第一个问题 我已经做了家庭作业，找到了类似的话题

但我还是看到了问题，所以我来了。我将谷歌地图嵌入到我的一个项目中，并希望将其剪辑成一个圆形框架

虽然我使用的解决方案在chrome和Firefox上效果很好，但我刚刚在做一些测试时发现Safari不会在“剪裁”容器上渲染边界半径，从而允许下面的google地图内容与圆角重叠

奇怪的是，这种行为只适用于狩猎。而在chrome上，它工作得非常好

你可以在safari和chrome中查看你自己打开的小提琴，你会立即发现不同之处（注意角落）

MAC的缺点很明显：只需尝试不同的浏览器即可

下面是小提琴中使用的代码结构，它反映了我在项目中使用的代码结构

<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;
    }

.夹子{
溢出：隐藏；
边界半径：20px；
盒影：rgba（0,0,0,0.55）10px 20px 20px；
边框：1px纯红；
}

注意：如果在.clip div中有静态图像作为背景，则带边框半径的剪裁效果在Safari 7.0.3版上有效

希望有人有一些简单的解决方法：）

---

谢谢，再见，试试这个。将这两种样式应用于地图所在的主div及其所有主要子级。似乎效果很好：

#map1 > .gm-style > div, #map1 > .gm-style > div > div  {
    overflow:hidden;
    border-radius: 20px;
}

在最新的Safari和Mac上的Chrome上进行测试

---

我使用带有图像的webkit掩码作为掩码来解决此问题 在我的css中，我有

#谷歌地图{
位置：相对位置；
宽度：400px；
高度：400px；
边界半径：100%；
-moz边界半径：100%；
-webkit边界半径：100%；
边框：1px纯绿色；
-webkit掩码框图像：url(http://83.212.84.134/stackoverflow/mask.png);
左边距：自动；
右边距：自动；
z指数：2；
}

我必须像这样做：

#map, #map > div, #map > div > .gm-style {
   border-radius: 40px;
   overflow: hidden;
}

---

这似乎是目前为止唯一的解决方案：这打破了IE10。地图全是灰色的。我刚刚测试了IE 9的所有背面，它似乎非常适合我？这在Safari 7.0.6中中断了。地图全是灰色的。@FredK-Safari for Mac或Windows？优胜美地Chrome40中断。当然，还有狩猎。