用邊框半徑隱藏的溢出在圖像上顯示一個奇怪的灰色邊框

Question

我有一個圓形div，它包裹了一個圖像和兩個其他div。問題是它顯示在這個div周圍的灰色邊框。問題出現在所有瀏覽器chrome和firefox上。我曾嘗試把瀏覽器的CSS供應商前綴，面具，但沒有結果。

我不能使用：

img { 
    width: 100%; 
    height: 100%; 
    border-radius: 120px; 
} 

，因爲圖像是在不正確的縱橫比。它在1:1。它應該是16:9，因爲它是YouTube視頻幀。

<div class="video_wrap"> 
    <div class="views">1651</div> 
     <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg"> 
    <div class="title">o'najr</div> 
</div> 

.video_wrap { 
    width: 240px; 
    height: 240px; 
    border-radius: 120px; 
    overflow: hidden; 
} 

.views, .title { 
    position: relative; 
    background: #fff; 
    height: 50px; 
    color: #f8008c; 
    text-align: center; 
    line-height: 50px; 
} 

.views { 
    top: 0px; 
    z-index: 2; 
} 

.title { 
    top: -100px; 
} 

.video_wrap img { 
    height: 100%; 
    position: relative; 
    top: -50px; 
} 

小提琴http://jsfiddle.net/h3198LfL/

Answer 1

你可以從.video_wrap刪除border-radius:120px，並添加下列內容img

img{ 
    width:100%; 
    border-radius: 120px; 
} 

SNIPPET

.video_wrap { 
 
    width: 240px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    width: 100%; 
 
    border-radius: 120px; 
 
} 
 
.views, 
 
.title { 
 
    position: relative; 
 
    background: #fff; 
 
    height: 50px; 
 
    color: #f8008c; 
 
    text-align: center; 
 
    line-height: 50px; 
 
} 
 
.views { 
 
    top: 0px; 
 
    z-index: 2; 
 
} 
 
.title { 
 
    top: -100px; 
 
} 
 
.video_wrap img { 
 
    height: 100%; 
 
    position: relative; 
 
    top: -50px; 
 
}

<div class="video_wrap"> 
 
    <div class="views">1651</div> 
 
    <img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg"> 
 
    <div class="title">o'najr</div> 
 
</div>

和

Answer 2

加入WebKit的代碼和其他視頻包裝，如：

.video_wrap { 
width: 240px; 
height: 240px; 
-webkit-border-radius:120px; 
-moz-border-radius:120px; 
-ms-border-radius:120px; 
-o-border-radius:120px; 
border-radius: 120px; 
overflow: hidden; 
} 

避免邊界，你可以設置它的新生產線，如：

.video_wrap img { 
border:0px; 
border:none; 
} 

DEMo