概要

box-shadow プロパティは要素にドロップシャドウ効果を与えます。影はカンマで区切ることで、複数指定できます。border-radius が指定されたボックスに適用された場合、影もその丸みを反映します。複数の影が指定された場合、その重ね順は text-shadow と同様、最初に指定されたものが最も手前に描画されます。

初期値none
適用対象全要素. It also applies to ::first-letter.
継承不可
メディアvisual
計算値指定値(length は全て絶対値となり、color については計算値となる)
Animation typeshadow リスト
正規順序形式文法で定義される一意のあいまいでない順序

構文

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( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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 の定義
勧告候補  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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
(有)-webkit

? ? ?
複数の影の設定 5.0
(有)-webkit
? ? ?
inset キーワード 5.0
(有)-webkit
? ? ?
<Spread radius> 5.0
(有)-webkit
? ? ?

注記

  • Internet Explorer はバージョン 5.5 より DropShadowShadow という独自拡張のフィルタを登載しています。これを利用することで要素にドロップシャドウ効果を与えられますが、構文や効果は CSS3 のものと異なります。
  • 古い Gekco、 Presto、 WebKit では影がレイアウトに影響します。たとえば、width100% のボックスに外向きの box-shadow を指定すると、横スクロールバーが表示されてしまいます。
  • Gecko 13 (Firefox 13) より、 -moz-box-shadow はサポート対象外となっています。これ以降は接頭辞無しのプロパティのみがサポートされます。
  • IE9 以降のバージョンでは、border-collapseseparate でない場合、 box-shadow が有効になりません。

ドキュメントのタグと貢献者

このページの貢献者: Sebastianz, Prinz_Rana, ethertank, torinome, myakura
最終更新者: Sebastianz,