html - Smooth box-shadow effect on div in css

Question

How do i get box-shadow effect like the one below in css. my div is like the one below but without the shadows.

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