box-shadowを一方向のみに出す

box-shadowを一方向のみに出したいことがよくあるので、指定方法をメモしておきます。

サンプルコード

各方向に出すパターンを作って試してみます。

HTML

<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>

まずは普通に設定してみます。
box-shadowの設定は「box-shadow: X方向の距離 Y方向の距離 ぼかし 広がり 色 内側表示(inset);」のようになります。

CSS

.top {
	box-shadow: 0 -5px 3px #000000;
}
.right {
	box-shadow: 5px 0 3px #000000;
}
.bottom {
	box-shadow: 0 5px 3px #000000;
}
.left {
	box-shadow: -5px 0 3px #000000;
}

この場合、一方向以外からも微妙に影が出てしまいます。
うまくいかなかった場合のデモページ
　

対策として、4番目の「広がり」の値に3番目の「ぼかし」の値と同じ量の負の値(今回の場合だと-3px)を指定して、はみ出ている分だけ全体的に影を縮小します。
これだけだと表示したい方向の影も縮小してしまうので、1番目または2番目の値に縮小した分だけ値を追加して影を伸ばします。

CSS

.top {
	box-shadow: 0 -8px 3px -3px #000000; /* 0 (-5px - 3px) 3px (-3px) #000000 */
}
.right {
	box-shadow: 8px 0 3px -3px #000000; /* (5px + 3px) 0 3px (-3px) #000000 */
}
.bottom {
	box-shadow: 0 8px 3px -3px #000000; /* 0 (5px + 3px) 3px (-3px) #000000 */
}
.left {
	box-shadow: -8px 0 3px -3px #000000; /* (-5px - 3px) 0 3px (-3px) #000000 */
}

これで一方向だけbox-shadowを出すことができました。
box-shadowを一方向からのみ表示するデモページ
　

insetを追加して内側の影にした場合も同じように一方向にできるようです。
(影の位置が逆になるので注意してください。)

CSS

.top {
	box-shadow: 0 8px 3px -3px #000000 inset;
}
.right {
	box-shadow: -8px 0 3px -3px #000000 inset;
}
.bottom {
	box-shadow: 0 -8px 3px -3px #000000 inset;
}
.left {
	box-shadow: 8px 0 3px -3px #000000 inset;
}

box-shadowを内側で一方向からのみ表示するデモページ
　

【参考サイト】

• box-shadow 使う時、影を出す方向を一方向に抑える – CHROMA