box-shadowプロパティ

要素に影をつけるためのプロパティです。

値

影の位置、ぼかし具合、広さ、影の色を順に指定していきます。
影の位置は最低限指定する必要があります。

次の例では影の位置、色を指定しています。
1つ目の値はx軸のずれ、2つ目の値はy軸のずれ、3つ目の値は色です。
色を指定しなかった場合、影は初期値である真っ白（#ffffff）になります。

.box1 {
  box-shadow: 10px 5px #555;
}

<div class="box1"></div>

次の例では影の位置、ぼかし、色を指定しています。
1つ目の値はx軸のずれ、2つ目の値はy軸のずれ、3つ目の値はぼかしの半径、4つ目の値は色です。

.box2 {
  box-shadow: 10px 5px 5px #555;
}

<div class="box2"></div>

次の例では影の位置、ぼかし、広さ、色の4つを指定しています。
4つ目の数値「10px」が広さの指定です。
標準では影の広さは要素と同じサイズですが、ここで指定した値を足して大きくしたり、逆に引いて小さくすることが可能です。

.box3 {
  box-shadow: 20px 15px 2px 10px #555;
}

<div class="box3"></div>

値に「inset」を指定することで、要素内に影を敷くことができます。
値の指定の順番は影の位置、ぼかし、広さ、色、insetとなります。

.box4 {
  box-shadow: 20px 15px 2px -10px #555 inset;
}

<div class="box4"></div>