Question

我正试图给照片一个非常光滑的阴影，不会碰到照片的角落。我尝试通过给图片父div一个border-radius和一个box-box阴影，但现在父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内的文本行上。图像放在文本行的基线上，因此图像和文本行底部之间还有一些空间。

使图像成为块元素以消除空间：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

我认为这样做是你想要的：

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.
}

border-radius使div高于它应该的值

3 个答案: