マンガでわかるホームページ作成

CSS box-shadowで下だけに影を出す方法

box-shadowを使うことでボックスに影をつけることができます。
しかし影は左右上下広がるので下にだけ影を出すにはひと工夫必要です。

そこで、box-shadowで下だけに影を出す方法を説明します。

結論

方法1.box-shadowの「広がり」をマイナス値にして下だけに影を出す

方法2.overflow: hiddenで下以外の影を隠す

box-shadow基本

box-shadowは以下の順で指定します。

box-shadow:横 縦 ぼかし 広がり 色

この「縦」の箇所に正の数値を指定すると影が下方向になります。

指定例)

.example{
    box-shadow: 0px 8px 5px 0px rgba(0,0,0,0.5)
}

ただし普通に指定すると上記のように左右にも少し影が出てしまいます。

方法1.box-shadowの「広がり」をマイナス値にして下だけに影を出す

box-shadowの「広がり」を指定する部分でぼかしの分マイナスを指定すると横から影がはみ出ません。プラスマイナス0にするというわけです。

広がりがマイナスになる分影の位置もマイナスになるので「縦」の部分はプラスマイナスでプラスになるような数値にします。

.example{
    box-shadow: 0px 8px 5px -5px rgba(0,0,0,0.5)
}

確かに影は下にしかないけど、その両端まで影がありません。

下記のように両端までしっかり影を表示させたい場合は次の「方法2」をお試しください。

方法2.overflow: hiddenで下以外の影を隠す

html

<div class="example3wrap"><div class="example3"></div></div>

CSS

.example3wrap{
    width: 200px;
    height: 200px;
    margin: 20px auto;
    overflow: hidden;/*コレ*/
    padding-bottom: 10px;/*コレ*/
}
.example3{
    height: 200px;
    border: 1px solid #999;
    box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.5)
}

box-shadowでは広がりをマイナスにせず0にします。

影のあるhtmlの外側をoverflow: hiddenで隠します

これだけだと影すべてが隠れてしまうので、padding-bottomで下の影分の余白を確保します。

まとめ

方法1.box-shadowの「広がり」をマイナス値にして下だけに影を出す

方法2.overflow: hiddenで下以外の影を隠す

以上、box-shadowで下だけに影を出す方法でした。

関連記事