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}？從我的電腦（也是最新的Chrome）中，它似乎是默認的iframe邊框。您也可以考慮製作iframe display:block，因爲內聯元素傾向於具有線高度和字母間距，從而拋棄像素精確呈現。

Answer 2

邊框半徑還沒有很好的支持或一致。如果你想要的效果，嘗試在元素周圍使用DIV，並使用圖形代替，在CSS中隱藏溢出。如果您的iframe高度不一，您可能需要查看滑門技術。

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

希望這有助於。

祝你好運！