Question

我的网站上有一个按钮，点击它会显示/隐藏谷歌地图div（使用iframe嵌入）。它工作正常，除了border-radius只在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>

的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;
}

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

Answer 1

它确实有用，您需要overflow: hidden; span元素iframe，因为span元素溢出border-radius元素，因此您不需要将#moreInfo { position: absolute; opacity: 0; top: 0px; left: 10px; width: 300px; height: 200px; background-color: blue; border-radius: 50%; overflow: hidden; }应用于iframe，它将呈现为矩形块...

overflow: hidden;

Demo

如果您不想使用border-radius作为父级，请使用iframe同时使用blue并摆脱#moreInfo iframe { border-radius: 50%; } } 背景颜色 ...

{{1}}

Demo 2 （作为you commented，在Chrome上失败，会很快调查）

Answer 2

如果将border-radius添加到.gm-style

，那将会有效

.gm-style{

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

这对我有用

iFrame嵌入谷歌地图上的CSS border-radius，无效

2 个答案: