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

Question

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

我在网上到处搜索，找不到有效的解决方案——这是谷歌地图的限制，还是我错过了一些 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;
  }

桌面视图：

移动视图：

标签： cssgoogle-maps

Answer 1

您正在将边界添加到容器中，而不是地图本身，因此为什么它会在移动设备上越过边界（地图的高度会增加）

尝试将边框添加到 iframe。