iFrame border-radius显示视觉空白

Question

在iFrame的父div上添加border-radius时，边框不完全适合iFrame，即使它们被赋予相同的宽度和高度值。

我在下面的结果图片中添加了指向视觉间隙的箭头。屏幕截图来自Chrome的最新版本（2016年3月）。

HTML代码：

<div class="mapFrame">
    <iFrame class="googleMap" src="http://maps.google.co.uk/maps?q=sanfrancisco&amp;output=embed" width="500" height="400"></iFrame>
</div>

CSS代码：

.mapFrame
{
    border-style: solid;
    border-width: 6px;
    border-color: #ffffff;
    box-shadow: 0px 0px 20px #000000;
    margin: auto;
    border-radius: 80px;
    overflow: hidden;
    width: 500px;
    height; 400px;
    position: relative;
}

结果：

Answer 1

你试过.mapFrame iframe {border: none}吗？从我的电脑（也是最新的Chrome），它似乎是默认的iframe边框。您也可以考虑将iframe display:block设置为内联元素，其行高和字母间距会偏离像素精确渲染。

Answer 2

边界半径尚未得到很好的支持或一致性。如果你想要所需的效果，尝试在元素周围使用DIV并使用图形，在CSS中隐藏溢出。如果您的iframe高度不同，您可能需要研究滑动门技术。

http://www.alistapart.com/articles/slidingdoors/

希望这有帮助。

祝你好运！