border-radius使div高於它應該

Question

我試圖給圖片一個非常光滑的陰影，這不會觸及圖片的角落。 我試圖通過給圖片父div邊框半徑和盒子陰影，但現在父div高於圖片。 我也很感激，如果你有一個更好的解決方案，光滑的影子。 JSFiddle

.box { 
 
    margin:20px; 
 
    border-radius:20px; 
 
    box-shadow:0 0 30px rgba(0,0,0,0.7); 
 
} 
 

 
.box .box-preview { 
 
    width: 100%; 
 
    border-radius:5px; 
 
}

<div class="box"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview"> 
 
    </div>

Answer 1

這是因爲圖像是內嵌元素，所以它被放置在裏面div文本行。圖像放置在文本行的基線上，因此圖像和文本行底部之間會有更多空間。

使圖像塊元素擺脫空間：

.box { 
 
    margin:20px; 
 
    border-radius:20px; 
 
    box-shadow:0 0 30px rgba(0,0,0,0.7); 
 
} 
 

 
.box .box-preview { 
 
    display: block; 
 
    width: 100%; 
 
    border-radius:5px; 
 
}

<div class="box"> 
 
     <img src="http://upload.wikimedia.org/wikipedia/commons/2/2b/Die_landschaft_mit_den_drei_baeumen.jpg" class="box-preview"> 
 
    </div>

Answer 2

我認爲這是做你想要什麼：

JSFiddle

這裏整個CSS：

.box-preview { 
    margin:20px; 
    border-radius:20px; 
    box-shadow:0px 0px 30px rgba(0,0,0,0.9); 
    width: 100%; 
    border-radius:0px; // Edit here to change the image border radius. 
} 

Answer 3

DEMO：http://jsfiddle.net/ajffyafm/

.box { 
    margin:20px; 
    border-radius:10px; 
    box-shadow:0 0 30px rgba(0,0,0,0.7); 
} 

.box .box-preview { 
    display: block; 
    width: 100%; 
    border-radius:5px; 
}