iFrame边框-半径显示视觉间隙

Question

当在iFrame的父div上添加边界半径时，边框并不完全适合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}了吗？从我的计算机(也是最新的铬)，它似乎是默认的iframe边框。您还可以考虑将iframe display:block作为内联元素，使其具有行高和字母间距，从而抛出像素的精确呈现。

Answer 2

边界半径还没有得到很好的支持或一致。如果你想得到想要的效果，试着在元素周围使用DIV，然后使用图形，在CSS中隐藏溢出。如果你的身高不同，你可能会想看看滑动门的技术。

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

希望这能有所帮助。

祝好运!