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

Posted 2023-03-06

【中文标题】嵌入谷歌地图的iFrame上的CSS边框半径，不起作用

【英文标题】：CSS border-radius on iFrame embedding google maps, not working

【发布时间】：2014-05-02 20:48:14

【问题描述】：

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

I have setup a jsFiddle demo

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"   frameborder="0" style="border:0"></iframe>
    </span>
</div>
<button>Show</button>

Javascript

$(function () 
    $("button").on("click", function () 
        if(parseInt($("#moreInfo").css("opacity"))) 
            $("button").text("Show");
            $("#moreInfo").css(opacity:1,top:0,height:200,display:'inline');
            $("#moreInfo").animate(opacity: 0,top: 100,height: 100, 100, function () $("#moreInfo").hide(););
         else 
            $("button").text("Hide");
            $("#moreInfo").css(opacity:0,top:100,height:100,display:'inline');
            $("#moreInfo").show();
            $("#moreInfo").animate(opacity: 1,top: 0,height: 200, 100);
        
    );
);

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;

注意：请不要标记这个重复，我已经经历了许多堆栈溢出的答案，但没有一个有帮助。另外请不要建议任何其他 google maps api 集成，我需要使用 iFrame 实现。

【参考方案1】：

它确实有效，您需要将overflow: hidden; 用于span 元素，因为您的iframe 溢出了span 元素，并且由于您没有在iframe 上应用border-radius，它呈现为矩形块...

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

Demo

---

如果您不想将overflow: hidden; 用于父级，那么也可以将border-radius 用于iframe...并去掉blue 背景颜色 ...

#moreInfo iframe 
    border-radius: 50%;

Demo 2 （作为you commented，在 Chrome 上失败，将尽快查看）

【讨论】：

我对@9​​87654335@ 没意见。我自己尝试过第二种方法，但它不适用于 chrome 和 safari

【参考方案2】：

如果将border-radius添加到.gm-style就可以了

.gm-style

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

它对我有用