--- title: box-shadow slug: Web/CSS/box-shadow tags: - CSS - CSS Backgrounds and Borders - CSS Property - CSS Styles - HTML Colors - Reference - Shadows - Styles - Styling HTML - box-shadow translation_of: Web/CSS/box-shadow --- <p>{{CSSRef}}</p> <p><span class="seoSummary"><code>box-shadow</code> 屬性為一個逗號分隔的列表描述一個或多個的陰影效果.</span> 這使的你能夠從幾乎任何元素的框架放入陰影. 如果一個標記了 {{cssxref("border-radius")}} 的元素也標記了 box shadow, 這將使得他們有相同的圓邊. 多重 box shadows 的 z-index 排序跟多重 <a href="/en-US/CSS/text-shadow">text shadows</a> 一樣(第一個備標記的陰影在最上面).</p> <p>{{cssinfo}}</p> <h3 id="Box-shadow_產生器"><strong>Box-shadow 產生器</strong></h3> <p><a href="/en-US/docs/Web/CSS/Tools/Box-shadow_generator">Interactive tool</a> 可以產生 box-shadow.</p> <h2 id="表達式">表達式</h2> <pre class="brush: css notranslate">/* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset-x | offset-y | color */ box-shadow: inset 5em 1em gold; /* Any number of shadows, separated by commas */ box-shadow: 3px 3px red, -1em 0 0.4em olive; </pre> <h3 id="參數">參數</h3> <dl> <dd><br> <code>inset</code><br> 如果未指定(默認),則假定陰影為陰影(就好像該框被提升到內容之上)。 inset關鍵字的存在將陰影更改為幀內的陰影(就好像內容在框內被壓下)。在邊框內部(甚至是透明的)繪製插入陰影,在背景上方,但在內容下方。<br> <br> <code><offset-x> <offset-y> </code><br> 這兩個 {{cssxref("<length>")}} 值用於設置陰影偏移量。 <offset-x>指定水平距離。負值將陰影置於元素的左側。 <offset-y>指定垂直距離。負值將陰影置於元素上方。有關可能的單位,請參見 {{cssxref("<length>")}}。 如果兩個值均為0,則陰影位於元素後面(如果設置了<blur-radius>和/或<spread-radius>,則可能會生成模糊效果)。<br> <br> <code><blur-radius> </code><br> 這是第三個 {{cssxref("<length>")}} 值。此值越大,模糊越大,陰影變得越來越大。不允許使用負值。如果未指定,則為0(陰影邊緣清晰)。<br> <br> <<code>spread-radius</code>><br> 這是第四個 {{cssxref("<length>")}} 值。正值將導致陰影擴大並變大,負值將導致陰影縮小。如果未指定,則為0(陰影將與元素的大小相同)。<br> <br> <<code>color</code>><br> 有關可能的關鍵字和符號,請參閱 {{cssxref("<color>")}} 值。 如果未指定,則使用的顏色取決於瀏覽器 - 它通常是 {{cssxref("color")}} 屬性的值,但請注意,Safari在此情況下當前繪製透明陰影。</dd> </dl> <h3 id="語法">語法</h3> {{csssyntax}} <h2 id="範例">範例</h2> <ul> <li><a href="https://techmoon.xyz/css-box-shadow-examples-by-css-scan/">CSS box-shadow examples</a></li> <li><a href="http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html">box-shadow test</a></li> <li><a href="http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/">box-shadow tutorial and examples</a></li> </ul> <pre class="notranslate">box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; </pre> <pre class="notranslate">box-shadow: 60px -16px teal;</pre> <pre class="notranslate">box-shadow: 10px 5px 5px black;</pre> <pre class="notranslate">box-shadow: 3px 3px red, -1em 0 0.4em olive;</pre> <pre class="notranslate">box-shadow: inset 5em 1em gold;</pre> <pre class="notranslate">box-shadow: 0 0 1em gold;</pre> <pre class="notranslate">box-shadow: inset 0 0 1em gold;</pre> <pre class="notranslate">box-shadow: inset 0 0 1em gold, 0 0 1em red;</pre> <h2 class="cleared" id="規範">規範</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> <td>Initial definition</td> </tr> </tbody> </table> <h2 id="瀏覽相容性">瀏覽相容性</h2> <p>{{CompatibilityTable}}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>10.0<sup>[1]</sup><br> 1.0{{property_prefix("-webkit")}}</td> <td>{{CompatGeckoDesktop("2.0")}}<sup>[3]</sup><br> {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> <td>9.0<sup>[2]</sup></td> <td>10.5<sup>[1]</sup></td> <td>5.1<sup>[1]</sup><br> 3.0 {{property_prefix("-webkit")}}</td> </tr> <tr> <td>Multiple shadows</td> <td>10.0<br> 1.0{{property_prefix("-webkit")}}</td> <td>{{CompatGeckoDesktop("2.0")}}<br> {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> <td>9.0</td> <td>10.5</td> <td>5.1<br> 3.0 {{property_prefix("-webkit")}}</td> </tr> <tr> <td><code>inset</code> keyword</td> <td>10.0<br> 4.0{{property_prefix("-webkit")}}</td> <td>{{CompatGeckoDesktop("2.0")}}<br> {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> <td>9.0</td> <td>10.5</td> <td>5.1<br> 5.0 {{property_prefix("-webkit")}}</td> </tr> <tr> <td>Spread radius</td> <td>10.0<br> 4.0{{property_prefix("-webkit")}}</td> <td>{{CompatGeckoDesktop("2.0")}}<br> {{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}</td> <td>9.0</td> <td>10.5</td> <td>5.1<br> 5.0 {{property_prefix("-webkit")}}</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Safari Mobile</th> <th>Opera Mini</th> <th>Opera Mobile</th> <th>Android</th> </tr> <tr> <td>Basic support</td> <td> <p>5.0<sup>[1]</sup><br> {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</p> </td> <td>{{CompatUnknown}}</td> <td>{{CompatVersionUnknown }}<sup>[1]</sup></td> <td>{{CompatVersionUnknown }}{{property_prefix("-webkit")}}<sup>[1]</sup></td> </tr> <tr> <td>Multiple shadows</td> <td>5.0<br> {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> </tr> <tr> <td><code>inset</code> keyword</td> <td>5.0<br> {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> </tr> <tr> <td>Spread radius</td> <td>5.0<br> {{CompatVersionUnknown }}{{ property_prefix("-webkit")}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> </tr> </tbody> </table> </div> <p>[1] Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p> <p>[2] Since version 5.5, Internet Explorer supports Microsoft's <a href="http://msdn.microsoft.com/en-us/library/ms532985%28VS.85,loband%29.aspx">DropShadow</a> and <a href="http://msdn.microsoft.com/en-us/library/ms533086%28VS.85,loband%29.aspx">Shadow</a> Filter. You can use this proprietary extension to cast a drop shadow (though the syntax and the effect are different from CSS3). In order to get <code>box-shadow</code> in IE9 or later, you need to set {{cssxref("border-collapse")}} to <code>separate</code>.</p> <p>[3] Gecko 13 {{geckoRelease(13)}} removed support for <code>-moz-box-shadow</code>. Since then, only the unprefixed version is supported. Shadows affect layout in older Gecko, Presto, and WebKit; e.g. if you cast an outer shadow to a box with a <code>width</code> of <code>100%</code>, you'll see a scrollbar.</p>