在野生动物园的地图框上的边界半径

Question

我正在使用此角度指令用于mapbox（http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map），并尝试将border-radius设置为10px，这在Chrome和Firefox中完美运行，但在Safari上它不起作用。

这是我正在使用的CSS（出于某种原因，它只适用于chrome / firefox上的opacity: .99）

.angular-mapbox-map{
    opacity: .99;
    border-radius: 10px;
}

有人知道发生了什么或如何解决这个问题。您可以使用chrome dev工具或等效工具在上面的链接中使用mapbox元素。

Answer 1

我在How to make CSS3 rounded corners hide overflow in Chrome/Opera找到了一个解决方案：

-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);