css中div的平滑盒阴影效果

Question

如何在css中获得类似下面的框阴影效果。 我的div就像下面那个但没有阴影。

Answer 1

我认为学习和了解您需要的最佳方式是使用以下网站：

http://www.cssmatic.com/box-shadow

您可以看到不同的值对阴影的影响，您可以回答自己的问题。

如果你不想学习它，出于某种原因，并且链接不是真正的答案，我认为这将重现你的影子：

-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);

Answer 2

您可以通过堆叠框阴影来实现。

https://jsfiddle.net/wb2hz0zc/

<div class="bg">
    <div class="box">
    </div>
</div>

.bg {
    padding:20px;
    background:#EEE;
}

.box {
    background: white;
    width: 400px;
    height: 100px;
    box-shadow: 0px 2px 3px rgba(0,0,0,.13) ,1px 2px 2px rgba(0,0,0,.1) , -1px -2px 2px rgba(0,0,0,.05) ;
}