box-shadow
box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | 12 | 4 | 5.1 | 18 | 5 | |
inset | 1 | 12 | 3.5 | 5 | 18 | 4.2 |
multiple shadows 複数の影 | 1 | 12 | 3.5 | 3 | 18 | 1 |
none | 1 | 12 | 3.5 | 3 | 18 | 2 |
spread radius スプレッド半径 | 1 | 12 | 3.5 | 5 | 18 | 4.2 |
注釈 2件
実装メモ
- このブラウザでは影がレイアウトに影響します。 たとえば、「幅」が「100%」のボックスに外側のシャドウをキャストすると、スクロールバーが表示されます。
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
注釈 4件
実装メモ
- このブラウザでは影がレイアウトに影響します。 たとえば、「幅」が「100%」のボックスに外側のシャドウをキャストすると、スクロールバーが表示されます。
対応条件
- ベンダープレフィックス付きで対応: -webkit- (49)
- ベンダープレフィックス付きで対応: -moz- (3.5)
削除済み
- このバージョンで機能が削除されました (13)
注釈 2件
実装メモ
- このブラウザでは影がレイアウトに影響します。 たとえば、「幅」が「100%」のボックスに外側のシャドウをキャストすると、スクロールバーが表示されます。
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
注釈 2件
実装メモ
- このブラウザでは影がレイアウトに影響します。 たとえば、「幅」が「100%」のボックスに外側のシャドウをキャストすると、スクロールバーが表示されます。
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 2件
実装メモ
- このブラウザでは影がレイアウトに影響します。 たとえば、「幅」が「100%」のボックスに外側のシャドウをキャストすると、スクロールバーが表示されます。
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
基本構文
CSS
/* Basic drop shadow */
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Elevation (multiple shadows) */
.elevated {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Inset Shadow */
.inset-input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}ライブデモ
実務での使いどころ
-
カードのエレベーション
複数のシャドウを重ねてマテリアルデザイン風の奥行き表現を実現。ホバー時にシャドウを強めてインタラクションを表現する。
-
フォーカスリングの強調
box-shadow で独自のフォーカスリングを作成し、outline を補完するアクセシブルなフォーカス表示を実現する。
注意点
- 大量の box-shadow や大きなぼかし半径はレンダリングパフォーマンスに影響する場合がある。
- box-shadow は要素のレイアウトサイズには影響しない（影の領域は他の要素と重なる）。
アクセシビリティ
- フォーカスリングを box-shadow のみで実装する場合、Windows のハイコントラストモードでは表示されない。outline との併用を推奨する。