initial commit

1 files changed, 228 insertions, 0 deletions

diff --git a/files/zh-tw/web/css/box-shadow/index.html b/files/zh-tw/web/css/box-shadow/index.html
new file mode 100644
index 0000000000..4d23dc2d13
--- /dev/null
+++ b/files/zh-tw/web/css/box-shadow/index.html
@@ -0,0 +1,228 @@
+---
+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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>