我正在尝试为图片提供一个非常平滑的阴影，该阴影不会触及图片的角落。我通过给图片父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>那是因为图片是内联元素，因此将其放在内的文字行上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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句