Border Radius 在 Safari 中不起作用

本文介绍了Border Radius 在 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

-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 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！