CSS - ボックスの内側に影をつけて立体感を出す

以前、ホームページ運営者から次のような相談を受けました。

相談者「枠線（ボックス）の中に画像を表示しているのですが、この画像に立体感を出したいんですよ」

相談者「イメージでいうと、絵の枠（フレーム）のような感じです。でもそんなに大げさな枠じゃなくて、少しでいいんです」

私「それなら、枠線（ボックス）の内側に影を入れると、画像が凹んだように見えて立体的に見えますよ」

今回はこの相談を解決するために、ボックスの内側に影（シャドウ）をつけて、立体感を出す方法を紹介します。

通常の影なしボックス

div要素（ボックス）に対して枠線「border: 1px solid #000」と、パディング「padding: 10px」を指定する場合、下のように表示されます。


div.box {
  border: 1px solid #000;
  padding: 10px;
}

ボックスの内側に影を付ける場合は「box-shadow」プロパティの先頭に「inset」キーワードを使用します。


.box-shadow {
  border: 1px solid #000;
  padding: 10px;
  box-shadow: inset 0 0 6px 6px rgba(0, 0, 0, 0.5);
}

先頭に「inset」を付ける以外は、通常の「box-shadow」の指定方法と同じです。

の順で指定します。