html - cssのdivに対するスムーズなボックスシャドウ効果

Question

css で以下のようなボックス シャドウ効果を取得するにはどうすればよいですか。私のdivは以下のようなものですが、影はありません。

Answer 1

必要なものを学び、確認するための最良の方法は、次のような Web サイトを使用することだと思います。

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