要素に影を追加するには

このガイドでは、ページ上の任意のボックスに影を追加する方法を紹介します。

ボックスに影を追加

影は、ページ上で要素を目立たせるために役立つ、一般的なデザイン機能です。CSS では、要素のボックスの影は box-shadow プロパティを使用して作成します（テキスト自体に影を追加したい場合は text-shadow が必要です）。

box-shadow プロパティは、いくつかの値を取ります。

下記例では、X 軸と Y 軸を 5px、ぼかしを 10px、広がりを 2px に設定しています。色として半透明の黒を使用しています。異なる値でシャドウがどのように変わるか、試してみてください。

メモ: この例では inset を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。