【box-shadow】内側の影inset / 複数の影の指定方法

影をつけるCSSプロパティのbox-shadowですが、
insetで内側に影をつけることができたり、
カンマで区切ると複数の影を作ることもできます。

今回はinsetの挙動と、複数の影のつけかたについてまとめてみたいと思います。

こんなかんじのサンプルをつくってみました。

See the Pen
BajpRXg by notebook (@orange-notebook)
on CodePen.

これはbox-shadowのinsetと複数の影を組み合わせて、
薄い青のボックスの内側に影をつくっています。

box-shadowの基本の書きかた

まずbox-shadowの基本的な書きかたについても触れたいと思います。

より一般的な外側に1種類でつけるbox-shadowだと、
こんなかんじのイメージではないでしょうか。

(最初のデモと同じ濃さの影で作っているので、かなり濃くなってしまっていますが。。)

See the Pen
eYJgRxM by notebook (@orange-notebook)
on CodePen.

基本的なbox-shadowの指定方法は下記になります。

上記の例では、box-shadow: 15px 25px 25px rgba(0,0,0,.5);と指定しています。

→方向に15px、↓方向に25px、
25pxのぼかし、拡張なし、黒のアルファ0.5の色ですね。

これを踏まえて、insetや複数の指定方法をみていきたいと思います。

box-shadowのinsetと複数の影の指定方法

1：insetの指定方法

box-shadowの値にinsetを追加します。
あとは通常のbox-shadowとちがいはありません。

ただ内側の影は、具体的にどこにつくのでしょうか。

値がプラスの場合は、X(→方向)左の内側、Y(↓方向)上の内側に影がつきます。

反対にマイナスの場合だと方向が逆になるので、
-X(←方向)右の内側、-Y(↑方向)下の内側に影をつきます。

プラスの値でinsetの影をつけた場合：

See the Pen
BajpdYw by notebook (@orange-notebook)
on CodePen.

box-shadow: inset 15px 25px 25px rgba(0,0,0,.5);
左と上の内側に影がついています。

マイナスの値でinsetの影をつけた場合：

See the Pen
oNbBePb by notebook (@orange-notebook)
on CodePen.

box-shadow: inset -15px -25px 25px rgba(0,0,0,.5);
右と下の内側に影がついています。

2：複数の影の指定方法

複数の影は、カンマで区切ることで指定することができます。

先ほどのinsetの影を両方組み合わせると、1番最初のデモの形になります。

See the Pen
BajpRXg by notebook (@orange-notebook)
on CodePen.

box-shadow: inset 15px 25px 25px rgba(0,0,0,.5), inset -15px -25px 25px rgba(0,0,0,.5);

おわりに

box-shadowを使いこなすことで、幅広い表現が影だけで作れそうですね。

今回はbox-shadowのinsetと複数の影のつけかたについてまとめてみました。

参考：MDN web docs CSS box-shadow