Javascript 嵌入谷歌地图的iFrame上的CSS边框半径不起作用

我在我的网站上有一个按钮，点击它会显示/隐藏一个谷歌地图div（使用iframe嵌入）。它工作正常，只是边框半径仅在jquery动画期间工作。动画完成后，iframe将变为方形

HTML

<div id="layer-2">
    <span id="moreInfo">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12242.306455925878!2d-75.12138282383809!3d39.90611059880662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e48fdca1ebac4d0!2sWalt+Whitman+Bridge!5e0!3m2!1sen!2sin!4v1395728987250" width="300" height="200" frameborder="0" style="border:0"></iframe>
    </span>
</div>
<button>Show</button>

CSS

#moreInfo {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 10px;
    width: 300px;
    height: 200px;
    background-color: blue;
    border-radius: 50%;
}
#layer-2 {
    height: 200px;
}
body {
    background-color: #aaa;
}

注意：请不要标记此副本，我已经查看了许多堆栈溢出的答案，但都没有帮助。另外，请不要建议任何其他谷歌地图api集成，我需要使用iFrame实现

---

它确实有效，您需要使用

overflow:hiddenspan

元素，当

iframe

溢出

span

元素时，由于没有在iframe上应用

边界半径，因此它呈现为矩形块

#moreInfo {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 10px;
    width: 300px;
    height: 200px;
    background-color: blue;
    border-radius: 50%;
    overflow: hidden;
}



如果不想使用
溢出：隐藏用于父级，然后将
边框半径
也用于
iframe
。。。然后去掉蓝色背景色

（由于在Chrome上失败，将很快进行调查）
如果在.gm样式中添加边框半径，这将是可行的

.gm-style{

        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

它对我有效
我可以处理
溢出
。我自己也尝试过第二种方法，但它不适用于chrome和safari
#moreInfo iframe {
    border-radius: 50%;
}

.gm-style{

        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }