iFrame 边框半径显示视觉间隙答案

【问题标题】：iFrame border-radius displays visual gapsiFrame 边框半径显示视觉间隙
【发布时间】：2016-06-14 18:39:35
【问题描述】：

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

结果：

【问题讨论】：

标签： html css iframe

【解决方案1】：

你试过.mapFrame iframe {border: none}吗？在我的电脑（也是最新的 chrome）上，它似乎是默认的 iframe 边框。您也可以考虑制作 iframe display:block，因为内联元素往往具有行高和字母间距，会影响像素精确渲染。

【讨论】：

非常有意义并且效果很好。谢谢，约瑟夫。

【解决方案2】：

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

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

希望这会有所帮助。

祝你好运！

【讨论】：

请不要只复制粘贴 5 年前的答案