box-shadow

背景・装飾

要素に影を付けるプロパティです。複数の影を重ねることも可能です。

構文

Syntax
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

コード例

例 1

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
実行結果

下方向に薄い影を追加

例 2

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
実行結果

フォーカス時の青いアウトライン効果

💡 TIPS

ホバー効果やフォーカス状態の表現によく使われる。

関連プロパティ

ブラウザサポート

IE9+, 全モダンブラウザ