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

css div 上的平滑框阴影效果

Smooth box-shadow effect on div in css

html

css

box-shadow