影を付ける（shadow effect）

　エレメントのフレームに影を付けて立体感を出すことができます。ここでは box-shadow プロパティを使った方法を解説します。

　box-shadow プロパティはエレメント自体に影を付け、形に自由度はありません。
　他に影を付けるには filter プロパティを利用する方法もあります。filter プロパティは、エレメント内の画像の形に合わせて影を付けることができます。
　どちらを選ぶかは使用用途によると思います。

- ad -

Example

　影を付ける（shadow effect）の例です。以下に実行結果を表示しています。

CSSあり scriptあり

cssあり/なし、scriptあり/なしを選択することができます。

　 box-shadow プロパティは、水平方向のオフセット、垂直方向のオフセット、ぼかし度、色が指定できます。
　例えば、水平方向に 3px, 垂直方向に 5px、ぼかし度を 10px、色を青色にするには以下にようにします。

box-shadow プロパティ

box-shadow: 3px 5px 7px gray;

　HTML と CSS はこれより下にあります。上記の確認ボタンで再実行します。内容は変更できますのでいろいろ試してみてください。

　<div>エレメントに影を付ける例です。

　box-shadowプロパティが影を付けるためのプロパティです。その他のプロパティは例が見易くするために定義しています。