CSSのプロパティであるbox-shadow（ドロップシャドウ）を使って、影を下だけにつける方法を解説します。
なお、box-shadowの使い方が曖昧な人は、下の記事を先に読んでおくと理解しやすいと思います。
box-shadowで影を下だけつける方法
box-shadowプロパティを使って、影を下だけに付けてみましょう。
以下のコードをサンプルとして使います。
よければコピーして、読みながら試してください。
<div class="box"></div>.box {
width: 100px;
height: 100px;
background-color: tomato;
}こんなボックスですね。
これに影を付けてみましょう。
今回は2つのパターンをご紹介します。
パターン1：縦方向の値をプラスにする
もっともオーソドックスなやり方になります。
コード例と完成見本です。
box-shadow: 0px 10px 5px 0px gray;
下方向に影を付けるため、縦方向（2番目）をプラスの値にしました（今回は10px）。
この値を大きくするほど影は下に伸びていき、反対にマイナスにすると上方向に影がつく、という仕組みです。
ここでのポイントは、ぼかしの数値です。
前から数えて3番目の値ですが、これを大きくすると影のぼかし具合が大きくなります。
問題は、ぼかしを大きくすると横方向に影が漏れてしまう点です。
ぼかしを10pxにしてみましょう。
box-shadow: 0px 10px 10px 0px gray;
雰囲気は良くなったのですが、左右から影が漏れてしまいましたね。
気づきにくいですが、先ほどの｢ぼかし5px｣も、じつは少し左右から影が漏れています。
このように、もし｢左右から1ミリも影を漏らしたくない！｣というのであれば、以下の方法を使いましょう。
パターン2：影の広がりをマイナスにする
box-shadowの4番目の値は｢影の広がり｣でしたね。
実はこの値をマイナスにすると、影の横漏れを防ぐことができます。
コード例と完成見本がコチラです。
box-shadow: 0px 10px 10px -5px gray;
左右の影漏れがなくなって、スタイリッシュに仕上がりましたね。
どれくらいマイナスにするかは、影の広がりによって異なりますので、適宜調整してください。
まとめ
box-shadowは、実務でもよく使われるプロパティのひとつです。
基本的な使い方を知っておくと実装の幅が広がりますので、この機会にぜひ覚えておきましょう。