Border Radius 在 Safari 中不起作用 [英] Border Radius not working in safari

问题描述

我有一个带有谷歌地图的页面，现在我正在尝试在其上设置边界半径.这适用于 Chrome 和 Firefox 等浏览器，但不适用于 safari.

I have a page with a google maps in it, now I'm trying to make a border radius on it. This is working in browsers like Chrome and Firefox but not working on safari.

您可以在此处找到该页面:clients.steven-dejong.nl/amano/#联系方式

You can find the page here: clients.steven-dejong.nl/amano/#contact

它正在处理地址块，如果我添加 -webkit-border-radius 和 -moz-border-radius 就没有意义了.

It's working with the address block and if I add -webkit-border-radius and -moz-border-radius it makes no sense.

我的边界半径不起作用的唯一部分是谷歌地图容器

The only part where my border radius isn't working is the google maps container

推荐答案

Border Radius to Google Map in Safari

Border Radius to Google Map in Safari

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

-webkit-transform: translateZ(0);

将此代码段用于地图 iframe 及其父 div

Use this snippet to both the map iframe and its parent div

这篇关于Border Radius 在 Safari 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！