div三面上的CSS box-shadow？

Question

我希望div的三面都有盒子阴影(除了顶边).我怎么能这样做？

Answer 1

这里有一个JS小提琴,它只使用一个单独的div工作.

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

您在底部,左下角和右下角设置了阴影.对于柔和的阴影,它有点棘手,但它是可行的.只需要一点猜测就可以减少中间阴影的模糊半径,这样当它与侧面阴影重叠时它看起来是无缝的并且不会太暗.

Answer 2

如果您正在寻找类似Google材质设计的影子：

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

资料来源：https : //medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d#.wyvbmcq10