CSSで要素に影をつける方法/box-shadowプロパティの使い方

要素の内側・外側に「影」を付けることができる、box-shadowのご紹介です。

box-shadowの使い方

「影」というとわかりづらいですが、要素に寄り添う別の形を作る機能がbox-shadowです。見てもらったほうが早いので、まずは基本の形から。

要素に影をつける
box-shadow: 横位置縦位置ぼかし広がり色;

横位置を変更するとこのようになります。

box-shadow:20px 0 0 0 grey;

box-shadow:10px 0 0 0 grey;

box-shadow:-20px 0 0 0 grey;

正の数値で右、負の数値で左に向かって影が移動します。

縦位置を変更するとこのようになります。

box-shadow:10px 10px 0 0 grey;

box-shadow:10px 0px 0 0 grey;

box-shadow:10px -10px 0 0 grey;

正の数値で下、負の数値で上に向かって影が移動します。

ぼかしを変更するとこのようになります。

box-shadow:10px 10px -1px 0 grey;

box-shadow:10px 10px 10px 0 grey;

box-shadow:10px 10px 20px 0 grey;

値を大きくするにつれて影がぼやけていきます（負の値は使えない）。

広がりを変更するとこのようになります。

box-shadow:10px 10px 0 -5px grey;

box-shadow:10px 10px 0 5px grey;

box-shadow:10px 10px 0 10px grey;

値を大きくするにつれて影が大きくなっていきます。

好きな色を指定することができます。

box-shadow:10px 10px 10px 3px #b0c4de;

値をカンマ（,）で区切ることで、複数の影を作ることが可能です。

box-shadow:10px 10px 10px 3px #b0c4de,
-10px -10px 10px 3px #ff4500;

最後にinsetを付けることで、影を要素の内部にセットすることが可能です。insetは影ごとにon/offが可能です。

box-shadow:10px 10px 10px 3px #b0c4de inset,
-10px -10px 10px 3px #ff4500 inset;

見ての通り、box-shadowのある位置が枠の背景色となってくり抜かれ、box-shadowの外側から背景色に向けて色が伸びる形になります。

この白抜きになってるところに
box-shadowがあります

box-shadowの使い方は以上です。