谷歌地图边界半径在移动设备上不受尊重答案

【问题标题】：Google maps border-radius not respected on mobile谷歌地图边界半径在移动设备上不受尊重
【发布时间】：2018-11-13 02:42:10
【问题描述】：

我有一个简单的谷歌地图元素，带有边界半径。在桌面上看起来很立体，但在手机上，地图的边角不是圆角的，但地图后面有一个圆角的边框。

我在网上到处搜索，但找不到有效的解决方案 - 这是谷歌地图的限制，还是我错过了一些 CSS 方面的东西？

<div id="search_params">
     <h3 id="search_by_address_text">search by address</h3>
     <input id="pac-input" class="controls" type="text" placeholder="">
     <div id="map"></div> 
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=myKey&libraries=places&callback=initMap"
async defer></script>

  #map {
    height: 400px;
    width: 600px;
    border: #798589 4px solid;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    max-width: 99%;
    max-height: 100%;
    margin: auto;
    overflow: hidden;
  }

桌面视图：

移动视图：

【问题讨论】：

标签： css google-maps

【解决方案1】：

您正在向容器添加边框，而不是地图本身，因此它在移动设备上越过了边界（地图的高度增加了）

尝试将边框添加到 iframe。

【讨论】：

嘿！感谢您的回复。我没有 iframe - 我用我的 HTML 更新了问题。感谢您的帮助！

【解决方案2】：

iframe 的任何样式也没有被遵守，所以我通过像这样设置地图的子 div 样式来解决这个问题：

  #map > div {
      border-radius: 20px;
      -webkit-mask-image: -webkit-radial-gradient(#798589, #798589);
      -webkit-transform: translate3d(0px, 0px, 0px);
  }

【讨论】：