css - safari 中 mapbox 上的边界半径

Question

我正在为 mapbox ( http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map ) 使用这个 Angular Directive(指令)，并试图让 border-radius 为 10px，这在 Chrome 和 Firefox 中完美运行，但在 Safari 上它不起作用。

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

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

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

Answer 1

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

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