box-shadowは要素の影をつけるプロパティですが、指定する値が複数あって初心者のうちは覚えづらかったりします。
この記事では基本の使い方から順番に解説していきますので是非参考にしてください。
box-shadowの使い方
基本の設定
box-shadowは最低３つのパラメータ指定が必要です。
１つ目がX軸方向（横方向）の影の長さ、２つ目がY軸方向（縦方向）の影の長さ、３つ目が影の色です。
X軸方向の影の長さを指定する
影の長さはマイナスの値を指定することもできます。
プラスの値だと右方向に、マイナスの値だと左方向に影が伸びていきます。
See the Pen box-shadow1-1 by Usagi (@naniwa_usagi) on CodePen.
Y軸方向の影の長さを指定する
Y軸方向の場合、プラスの値だと上方向に、マイナスの値だと下方向に影が伸びていきます。
See the Pen box-shadow1-2 by Usagi (@naniwa_usagi) on CodePen.
色を指定する
色の指定はredのようなキーワード指定でも、RGBやRGBA指定でも#000000のような16進数カラーコード指定でも大丈夫です。
色は一番最後に指定しないとうまく機能しませんので注意してください。
See the Pen box-shadow1-2 by Usagi (@naniwa_usagi) on CodePen.
影をぼかす
２つ目のパラメータ（Y軸方向の影の長さ）の後ろに影をぼかすパラメータを設定できます。
値が大きいほど影がぼやけます。また、マイナスの値は指定できません。
ぼかし具合のパラメータは省略可能で、省略した場合は0とみなされます。
See the Pen box-shadow2 by Usagi (@naniwa_usagi) on CodePen.
影の大きさを変える
ぼかし具合のパラメータの後ろには影の大きさを変えるパラメータを設定できます。
値が大きくなるほど影が大きくなり、マイナスの値になると影が小さくなります。
影の大きさのパラメータは省略可能で省略した場合は等倍の大きさになります。
See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.
影を内側につける
insetを指定すると影を要素の内側につけることができます。
凹ませたような見た目を作りたい場合に使用されます。
insetは省略可能で省略した場合は影が要素の外側につきます。
See the Pen box-shadow4 by Usagi (@naniwa_usagi) on CodePen.
影を２色つける
カンマ区切りで２つ目の影をつけることができます。
２つ目の影は１つ目の影の後ろ側に表示されます。
insetと組み合わせることもできます。
See the Pen box-shadow5 by Usagi (@naniwa_usagi) on CodePen.
作例：影で凹凸を表現する
影を複数指定することで凹凸の表現が可能です。
See the Pen box-shadow7 by Usagi (@naniwa_usagi) on CodePen.
作例：ホバーと組み合わせた例
ホバー時に影がつくようにすれば更に視覚的に効果のあるデザインが可能になります。
See the Pen box-shadow6 by Usagi (@naniwa_usagi) on CodePen.
ホバーの使い方は以下の記事で解説していますので参考にしてみてください。
まとめ
box-shadowはボタンなどのデザインでよく使われるため是非使い方を覚えてください。
