---
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>&lt;offset-x&gt; &lt;offset-y&gt; </code><br>
 這兩個 {{cssxref("&lt;length&gt;")}} 值用於設置陰影偏移量。 &lt;offset-x&gt;指定水平距離。負值將陰影置於元素的左側。 &lt;offset-y&gt;指定垂直距離。負值將陰影置於元素上方。有關可能的單位，請參見 {{cssxref("&lt;length&gt;")}}。 如果兩個值均為0，則陰影位於元素後面（如果設置了&lt;blur-radius&gt;和/或&lt;spread-radius&gt;，則可能會生成模糊效果）。<br>
 <br>
 <code>&lt;blur-radius&gt; </code><br>
 這是第三個 {{cssxref("&lt;length&gt;")}} 值。此值越大，模糊越大，陰影變得越來越大。不允許使用負值。如果未指定，則為0（陰影邊緣清晰）。<br>
 <br>
 &lt;<code>spread-radius</code>&gt;<br>
 這是第四個 {{cssxref("&lt;length&gt;")}} 值。正值將導致陰影擴大並變大，負值將導致陰影縮小。如果未指定，則為0（陰影將與元素的大小相同）。<br>
 <br>
 &lt;<code>color</code>&gt;<br>
 有關可能的關鍵字和符號，請參閱 {{cssxref("&lt;color&gt;")}} 值。 如果未指定，則使用的顏色取決於瀏覽器 - 它通常是 {{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>