要素に影を追加するには
このガイドでは、ページ上の任意のボックスに影を追加する方法を紹介します。
ボックスに影を追加
影は、ページ上で要素を目立たせるために役立つ、一般的なデザイン機能です。CSS では、要素のボックスの影は box-shadow
プロパティを使用して作成します(テキスト自体に影を追加したい場合は text-shadow
が必要です)。
box-shadow
プロパティは、いくつかの値を取ります。
- X 軸上のオフセット
- Y 軸上のオフセット
- ぼかし半径
- 拡散半径
- 色
inset
キーワード
下記例では、X 軸と Y 軸を 5px、ぼかしを 10px、広がりを 2px に設定しています。色として半透明の黒を使用しています。異なる値でシャドウがどのように変わるか、試してみてください。
メモ: この例では inset
を使用していません。これは、シャドウが既定のドロップシャドウであり、シャドウの上にボックスがあることを意味しています。インセットシャドウは、コンテンツがページに押し込まれているかのように、ボックスの内側に現れます。