CSS盒子阴影在三边的div？ [英] CSS box-shadow on three sides of a div?

问题描述

我想在div的三边有阴影（除了上边）。我怎么能这样做？

I want to have box-shadow on three sides of a div (except top side). How could I do that?

推荐答案

这里是 JS Fiddle ，它只使用一个div来工作。

Here's a JS Fiddle for you, it only uses one single div to work.

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

您在底部，左下和右下方设置了阴影。用软阴影它有点棘手，但它是可行的。它只是需要一些猜测来减少中间阴影的模糊半径，使它看起来无缝，而不是太暗，当它与侧面阴影重叠。

You set a shadow on the bottom, bottom left, and bottom right. With soft shadows it gets a bit tricky but it is doable. It just needs a bit of guesswork to decrease the middle shadow's blur radius, so that it looks seamless and not too dark when it overlaps with the side shadows.

这篇关于CSS盒子阴影在三边的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！