CSSのbox-shadowとは？box-shadowを使った影の付け方を解説！
CSSで影をつけるbox-shadowとは？
CSSのbox-shadowとは、要素に影をつけることができるCSSプロパティです。
box-shadowをマスターすると、Webページのデザインの幅が広がります。
box-shadowの使い方
CSSでbox-shadowプロパティを指定し、値は以下のように設定します。
【 box-shadowの値 】
box-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset");
box-shadowのコードはこんな感じ
ブラウザで実行するとこんな感じです。
それぞれ外側・内側の影がつきましたね！
box-shadowの値を詳しく説明
box-shadowプロパティに設定する値についてもう少し詳しく説明します。
【 box-shadowの値 】
box-shadow: (ずらすX値) (ずらすY値) (ぼかし値) (拡大値) (色) (内側"inset");
| (ずらすX値) |
影に対してずらしたい横のサイズを指定します。 
|
|---|---|
| (ずらすY値) |
影に対してずらしたい縦のサイズを指定します。 
|
| (ぼかし値) |
影に対してぼかしたいサイズを指定します。 
|
| (拡大値) |
影に対して拡大したいサイズを指定します。 
|
| (色) |
影に対して色を指定します。 
|
| (内側"inset") |
値に文字列"inset"を指定すると、内側への影となります。 
|
| none |
値に文字列"none"のみ指定すると、影なしとなります。 
|
box-shadowを使った要素サンプル
box-shadowで影をつけるとどんな要素が作れるのかサンプルをご紹介します。
※あくまで一例であり、他のプロパティと組み合わせております。
box-shadowのサンプル：ボタン
影を使うことでボタンと把握しやすく、ホバー時に影を無くすことで「押せそう」を演出できます。
【 サンプルコード 】
box-shadowのサンプル：テキスト入力欄
内側の影をつかうことで、「立体感」を演出しています。