safari 中 mapbox 上的边界半径

Question

我正在为 mapbox (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map) 使用这个 angular 指令，并试图将边框半径设置为 10px，这在 Chrome 和 Firefox 中完美运行，但在 Safari 上它不工作。

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

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

有谁知道这是怎么回事或如何解决这个问题。您可以使用 chrome 开发工具或等效工具来使用上面 link 中的 mapbox 元素。

Answer 1

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

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

safari 中 mapbox 上的边界半径

Border-radius on mapbox in safari

css

mapbox