概要
box-shadow プロパティは要素にドロップシャドウ効果を与えます。影はカンマで区切ることで、複数指定できます。border-radius が指定されたボックスに適用された場合、影もその丸みを反映します。複数の影が指定された場合、その重ね順は text-shadow と同様、最初に指定されたものが最も手前に描画されます。
| 初期値 | none |
|---|---|
| 適用対象 | 全要素. It also applies to ::first-letter. |
| 継承 | 不可 |
| メディア | visual |
| 計算値 | 指定値（length は全て絶対値となり、color については計算値となる） |
| アニメーションの可否 | 可。 の値として補完しますshadow リスト |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
none | <shadow>#where
<shadow> = inset? && <length>{2,4} && <color>?where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
値
- inset
- 指定されていない場合、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
insetキーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。insetな影は背景の上、ボーダーや内容の下に描画されます。
【訳注: この値を用いる場合には、spread-radius を省略出来ません。box-shadow が効かないケースに遭遇した時はこの事を思い出して下さい。】 - <offset-x> <offset-y>
- 影のオフセットは 2 つの
<length>で指定されます。<offset-x>は水平方向の距離を表します。負の値が指定された場合、影は左方向に延びます。<offset-y>は垂直方向の距離を表します。負の値が指定された場合、影は上方向に延びます。利用可能な値の単位については<length>をご覧ください。
どちらのオフセットも0である場合、影は要素の裏に配置されます。<blur-radius>や<spread-radius>が指定されている場合は、ぼかし効果が与えられるでしょう。 - <blur-radius>
- 3 番目に指定された
<length>の値。値が大きくなるほど、ぼかしが大きくなるため影の面積が広くなり、また影の色も薄くなります。負の値は指定できません。値が指定されていない場合は0と解釈され、影の縁にぼかしがかかりません。 - <spread-radius>
- 4 番目に指定された
<length>の値。正の値が指定された場合、影がその分だけ拡張され大きくなります。負の値が指定された場合、影は縮小されます。値が指定されていない場合は0と解釈され、影の大きさは要素の大きさと同じままとなります。 - <color>
- 影の色を指定します。利用可能な値については
<color>をご覧ください。
値が指定されていない場合の挙動はブラウザによって異なります。Gecko (Firefox)、 Presto (Opera)、 Trident (Internet Explorer) では {cssxref("color")}} プロパティの色が使われますが、WebKit では透明になります。ですから<color>が省略された場合、互換性がなくなる点に注意してください。
実例
box-shadow: 60px -16px teal;
box-shadow: 10px 5px 5px black;
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow: inset 5em 1em gold;
box-shadow: 0 0 1em gold;
box-shadow: inset 0 0 1em gold;
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 box-shadow の定義 |
勧告候補 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 10.0 1.0-webkit |
4.0 (2.0) 3.5 (1.9.1)-moz |
9.0 (※『注記』を参照) | 10.5 | 5.1 (WebKit 534) 3.0 (WebKit 522)-webkit |
| 複数の影の設定 | 10.0 1.0-webkit |
4.0 (2.0) 3.5 (1.9.1)-moz |
9.0 | 10.5 | 5.1 (WebKit 534) 3.0 (WebKit 522)-webkit |
inset キーワード |
10.0 4.0-webkit |
4.0 (2.0) 3.5 (1.9.1)-moz |
9.0 | 10.5 | 5.1 (WebKit 534) 5.0 (WebKit 533)-webkit |
| <Spread radius> | 10.0 4.0-webkit |
4.0 (2.0) 3.5 (1.9.1)-moz |
9.0 | 10.5 | 5.1 (WebKit 534) 5.0 (WebKit 533)-webkit |
| 機能 | iOS Safari | Opera Mini | Opera Mobile | Android Browser |
|---|---|---|---|---|
| 基本サポート |
5.0 |
? | ? | ? |
| 複数の影の設定 | 5.0 (有)-webkit |
? | ? | ? |
inset キーワード |
5.0 (有)-webkit |
? | ? | ? |
| <Spread radius> | 5.0 (有)-webkit |
? | ? | ? |
注記
- Internet Explorer はバージョン 5.5 より DropShadow、 Shadow という独自拡張のフィルタを登載しています。これを利用することで要素にドロップシャドウ効果を与えられますが、構文や効果は CSS3 のものと異なります。
- 古い Gekco、 Presto、 WebKit では影がレイアウトに影響します。たとえば、
widthが100%のボックスに外向きのbox-shadowを指定すると、横スクロールバーが表示されてしまいます。 - Gecko 13 (Firefox 13) より、
-moz-box-shadowはサポート対象外となっています。これ以降は接頭辞無しのプロパティのみがサポートされます。 - IE9 以降のバージョンでは、
border-collapseがseparateでない場合、box-shadowが有効になりません。