initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
commit: 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree: a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/css
parent: 074785cea106179cb3305637055ab0a009ca74f2 (diff)
download: translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
73 files changed, 16990 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/@font-face/index.html b/files/zh-tw/web/css/@font-face/index.html
new file mode 100644
index 0000000000..ca045e5dab
--- /dev/null
+++ b/files/zh-tw/web/css/@font-face/index.html
@@ -0,0 +1,247 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - CSS
+  - CSS Reference
+  - CSS 參考
+  - Fonts
+  - WOFF
+  - 字型
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="摘要">摘要</h2>
+
+<p>The <code>@font-face</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule" title="At-rule">at-rule</a> allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, <code>@font-face</code> eliminates the need to depend on the limited number of fonts users have installed on their computers. The <code>@font-face</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en-US/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a>.</p>
+
+<p>{{seeCompatTable}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">@font-face {
+  [font-family: &lt;family-name&gt;;]?
+  [src: [ &lt;uri&gt; [format(&lt;string&gt;#)]? | &lt;font-face-name&gt; ]#;]?
+  [unicode-range: &lt;urange&gt;#;]?
+  [font-variant: &lt;font-variant&gt;;]?
+  [font-feature-settings: normal|&lt;feature-tag-value&gt;#;]?
+  [font-stretch: &lt;font-stretch&gt;;]?
+  [font-weight: &lt;weight&gt;];
+  [font-style: &lt;style&gt;];
+}
+</pre>
+
+<h3 id="參數值">參數值</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Specifies a font name that will be used as font face value for font properties.</dd>
+ <dt><code>&lt;uri&gt;</code></dt>
+ <dd>URL for the remote font file location, or the name of a font on the user's computer in the form <code>local("Font Name")</code>.</dd>
+ <dt><code>&lt;font-variant&gt;</code></dt>
+ <dd>A {{cssxref("font-variant")}} value.</dd>
+ <dt><code>&lt;font-stretch&gt;</code></dt>
+ <dd>A {{cssxref("font-stretch")}} value.</dd>
+ <dt><code>&lt;weight&gt;</code></dt>
+ <dd>A <a href="/en-US/docs/CSS/font-weight" title="CSS/font-weight">font weight</a> value.</dd>
+ <dt><code>&lt;style&gt;</code></dt>
+ <dd>A <a href="/en-US/docs/CSS/font-style" title="CSS/font-style">font style</a> value.</dd>
+</dl>
+
+<p>You can specify a font on the user's local computer by name using the <code>local()</code> syntax. If that font isn't found, other sources will be tried until one is found.</p>
+
+<h2 id="範例">範例</h2>
+
+<p>這個範例指定一個可供下載的字型，並套用至 document 的整個 body。</p>
+
+<p><a href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">檢視線上範例</a></p>
+
+<pre>&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>這個範例會套用使用者本地的 "Helvetica Neue Bold" 字型，只有當使用者未安裝該字型（兩種名稱都試過了），才會下載 "MgOpenModernaBold.ttf" 字型：</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="注意事項">注意事項</h2>
+
+<ul>
+ <li>In Gecko, web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless <a href="/en-US/docs/HTTP_access_control" title="HTTP access control">HTTP access controls</a> are used to relax this restriction.</li>
+ <li>
+  <div class="note"><strong>Note:</strong> Because there are no defined MIME types for TrueType, OpenType, and Web Open File Format (WOFF) fonts, the MIME type of the file specified is not considered.</div>
+ </li>
+ <li>When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading.  As each web font finishes downloading, Gecko updates the text that uses that font.  This allows the user to read the text on the page more quickly.</li>
+</ul>
+
+<h2 id="規格文件">規格文件</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格文件</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>字型格式規格文件</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/WOFF" title="About_WOFF">WOFF</a></td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>6.0</td>
+   <td>9.0</td>
+   <td>11.10</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>SVG 字型</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline(119490)}}</td>
+   <td>有</td>
+   <td>{{CompatNo}}</td>
+   <td>有</td>
+   <td>有</td>
+  </tr>
+  <tr>
+   <td><code>unicode-range</code></td>
+   <td>
+    <p>yes <span style="line-height: 1.572;">({{bug(443976)}})</span></p>
+   </td>
+   <td>有</td>
+   <td>9.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能特色</th>
+   <th>Android</th>
+   <th>Firefox 行動版 (Gecko)</th>
+   <th>IE 行動版</th>
+   <th>Opera Mini</th>
+   <th>Opera 行動版</th>
+   <th>Safari 行動版</th>
+  </tr>
+  <tr>
+   <td>基本支援</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>WOFF</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>SVG 字型</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}<br>
+    {{unimplemented_inline(119490)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>unicode-range</code></td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="注意事項_2">注意事項</h3>
+
+<ul>
+ <li>Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.</li>
+ <li>TrueType and OpenType are not included because they are superseded by WOFF.</li>
+</ul>
+
+<h2 id="詳見">詳見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF" title="About WOFF">About WOFF</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/@media/height/index.html b/files/zh-tw/web/css/@media/height/index.html
new file mode 100644
index 0000000000..cb15e99e80
--- /dev/null
+++ b/files/zh-tw/web/css/@media/height/index.html
@@ -0,0 +1,77 @@
+---
+title: height
+slug: Web/CSS/@media/height
+translation_of: Web/CSS/@media/height
+---
+<p><strong><code>height</code></strong> 屬於 CSS 的媒體功能之一，其值為可視區域 (viewport) 的高度，像是 CSS 的 <a href="/en-US/docs/Web/CSS/length"><code>&lt;length&gt;</code></a>。</p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註釋</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>初始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/@media/index.html b/files/zh-tw/web/css/@media/index.html
new file mode 100644
index 0000000000..11f39d07b6
--- /dev/null
+++ b/files/zh-tw/web/css/@media/index.html
@@ -0,0 +1,377 @@
+---
+title: '@media'
+slug: Web/CSS/@media
+tags:
+  - At-rule
+  - CSS
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@media
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>@media</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/At-rule" title="zh-TW/CSS/At-rule">at-rule</a> 與一組被大括弧隔開、並由 <a href="/zh-TW/CSS/Media_queries" title="CSS media queries">media query</a> 條件定義的 CSS 巢狀區塊有關。<code>@media</code> at-rule 不只能用在最頂層的 CSS 區塊，也能在任何 <a href="/zh-TW/CSS/At-rule#Conditional_Group_Rules" title="zh-TW/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 使用。</p>
+
+<p><code>@media</code> at-rule 能透過 CSS object model 介面 {{domxref("CSSMediaRule")}} 通行。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<p>A <code>&lt;media-query&gt;</code> is composed of a optional media type and/or a number of media features.</p>
+
+<h2 id="Media_types" name="Media_types">Media types</h2>
+
+<dl>
+ <dt>all</dt>
+ <dd>Suitable for all devices.</dd>
+ <dt>print</dt>
+ <dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on <a href="/en/CSS/Paged_Media" title="https://developer.mozilla.org/en/CSS/Paged_Media">paged media</a>, and the <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">media section of the Getting Started tutorial</a> for information about formatting issues that are specific to paged media.</dd>
+ <dt>screen</dt>
+ <dd>Intended primarily for color computer screens.</dd>
+ <dt>speech</dt>
+ <dd>Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.</dd>
+</dl>
+
+<div class="note"><strong>Note:</strong> CSS2.1 and Media Queries 3 defined several additional media types (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), but they were deprecated in <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> and shouldn't be used.</div>
+
+<h2 id="Media_features" name="Media_features">Media Features</h2>
+
+<p>Each <em>media feature</em> tests for one specific feature of the browser or device.</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>Name</th>
+   <th>Summary</th>
+   <th>Notes</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/width"><code>width</code></a></td>
+   <td>Viewport width</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/height"><code>height</code></a></td>
+   <td>Viewport height</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/aspect-ratio"><code>aspect-ratio</code></a></td>
+   <td>Width-to-height aspect ratio of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/orientation"><code>orientation</code></a></td>
+   <td>Orientation of the viewport</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a></td>
+   <td>Pixel density of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scan"><code>scan</code></a></td>
+   <td>Scanning process of the output device</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/grid"><code>grid</code></a></td>
+   <td>Is the device a grid or bitmap?</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/update-frequency"><code>update-frequency</code></a></td>
+   <td>How quickly (if at all) can the output device modify the appearance of the content</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-block"><code>overflow-block</code></a></td>
+   <td>How does the output device handle content that overflows the viewport along the block axis?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/overflow-inline"><code>overflow-inline</code></a></td>
+   <td>Can content that overflows the viewport along the inline axis be scrolled?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color"><code>color</code></a></td>
+   <td>Number of bits per color component of the output device, or zero if the device isn't color.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/color-index"><code>color-index</code></a></td>
+   <td>Number of entries in the output device's color lookup table, or zero if the device does not use such a table.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/@media/display-mode">display-mode</a></code></td>
+   <td>The display mode of the application, as specified in the web app manifest's <a href="/en-US/docs/Web/Manifest#display">display member</a>.</td>
+   <td>Defined in the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">Web App Manifest spec</a>.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/monochrome"><code>monochrome</code></a></td>
+   <td>Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/inverted-colors"><code>inverted-colors</code></a></td>
+   <td>Is the user agent or underlying OS inverting colors?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/pointer"><code>pointer</code></a></td>
+   <td>Is the primary input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/hover"><code>hover</code></a></td>
+   <td>Does the primary input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-pointer"><code>any-pointer</code></a></td>
+   <td>Is any available input mechanism a pointing device, and if so, how accurate is it?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/any-hover"><code>any-hover</code></a></td>
+   <td>Does any available input mechanism allow the user to hover over elements?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/light-level"><code>light-level</code></a></td>
+   <td>Current ambient light level</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/scripting"><code>scripting</code></a></td>
+   <td>Is scripting (e.g. JavaScript) available?</td>
+   <td>Added in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-width"><code>device-width</code></a> {{obsolete_inline}}</td>
+   <td>Width of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-height"><code>device-height</code></a> {{obsolete_inline}}</td>
+   <td>Height of the rendering surface of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/device-aspect-ratio"><code>device-aspect-ratio</code></a> {{obsolete_inline}}</td>
+   <td>Width-to-height aspect ratio of the output device</td>
+   <td>Deprecated in Media Queries Level 4</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio"><code>-webkit-device-pixel-ratio</code></a> {{non-standard_inline}}</td>
+   <td>Number of physical device pixels per CSS pixel</td>
+   <td>Nonstandard; WebKit/Blink-specific. If possible, use the <a href="/en-US/docs/Web/CSS/@media/resolution"><code>resolution</code></a> media feature instead.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-3d"><code>-webkit-transform-3d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 3D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit/Blink-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transform-2d"><code>-webkit-transform-2d</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS 2D {{cssxref("transform")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-transition"><code>-webkit-transition</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("transition")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/CSS/@media/-webkit-animation"><code>-webkit-animation</code></a> {{non-standard_inline}}</td>
+   <td>Are CSS {{cssxref("animation")}}s supported?</td>
+   <td>Nonstandard; WebKit-specific</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples" name="Examples">Examples</h2>
+
+<pre class="brush: css">@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+</pre>
+
+<h2 id="Specifications">Specifications</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('Compat', '#css-media-queries', 'CSS Media Queries')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>Standardizes the <code>-webkit-device-pixel-ratio</code> and <code>-webkit-transform-3d</code> media features.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Conditional', '#at-media', '@media')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td>Defines the basic syntax of the <code>@media</code> rule.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries', '#media', '@media')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td>
+    <p>Added <code>scripting</code>, <code>pointer</code>, <code>hover</code>, <code>light-level</code>, <code>update-frequency</code>, <code>overflow-block</code>, and <code>overflow-inline</code> media features.<br>
+     Deprecated all media types except for <code>screen</code>, <code>print</code>, <code>speech</code>, and <code>all</code>.<br>
+     Made the syntax more flexible by adding, among other things, the <code>or</code> keyword.</p>
+   </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries', '#media0', '@media')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>6.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.2</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoDesktop(1.7) }}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{ CompatGeckoDesktop(47) }}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>all</code>, <code>print</code>, <code>screen</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>speech</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>9.0</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>Media features</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{ CompatGeckoMobile(1.7) }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td><code>display-mode</code> media feature</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a class="internal" href="/en/CSS/Media_queries" title="En/CSS/Media queries">Media queries</a></li>
+ <li>The CSSOM {{ domxref("CSSMediaRule") }} associated with this at-rule.</li>
+</ul>
diff --git a/files/zh-tw/web/css/@viewport/height/index.html b/files/zh-tw/web/css/@viewport/height/index.html
new file mode 100644
index 0000000000..e883d44041
--- /dev/null
+++ b/files/zh-tw/web/css/@viewport/height/index.html
@@ -0,0 +1,120 @@
+---
+title: height
+slug: Web/CSS/@viewport/height
+translation_of: Web/CSS/@viewport
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><font face="Consolas, Liberation Mono, Courier, monospace"><strong>高度 </strong></font>的 CSS 描述符是用於設定兩者的簡易描述符 {{cssxref("@viewport/min-height", "min-height")}} 與 {{cssxref("@viewport/max-height", "max-height")}} 的可視區域(viewport)。提供一個可視區域的長度值，將設定兩者的最小高度與最大高度的值。</p>
+
+<p>如果提供了兩個可視區域(viewport)，第一個值將設定為最小高度，而第二個值將設定為最大高度。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css">/* One value */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>使用 CSS 描述符來進行值的計算。</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>非負絕對值或相對長度。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>初始可視區域的相對寬度或相對高度百分比的縮放係數為 1.0，且必須是非負數。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="舉例">舉例</h2>
+
+<pre class="brush: css">@viewport {
+  height: 500px;
+}</pre>
+
+<h2 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 Device', '#descdef-viewport-height', '"height" descriptor')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</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>29 (behind a flag)</td>
+   <td>{{CompatNo}}</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}}</td>
+   <td>10{{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/@viewport/index.html b/files/zh-tw/web/css/@viewport/index.html
new file mode 100644
index 0000000000..f03aaee77b
--- /dev/null
+++ b/files/zh-tw/web/css/@viewport/index.html
@@ -0,0 +1,159 @@
+---
+title: '@viewport'
+slug: Web/CSS/@viewport
+tags:
+  - Adaptation
+  - At-rule
+  - CSS
+  - Device
+  - NeedsContent
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/@viewport
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>The<strong> <code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>A <em>zoom factor</em> of <code>1.0</code> or <code>100%</code> corresponds to no zooming. Larger values zoom in. Smaller values zoom out.</p>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<p>Browsers are supposed to ignore unrecognized descriptors.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-width"><code>min-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt>
+ <dd>Used in the determination of the width of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-width</code> and <code>max-width</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt>
+ <dd>Used in the determination of the height of the viewport when the document is first displayed.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt>
+ <dd>A shorthand descriptor for setting both <code>min-height</code> and <code>max-height</code></dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt>
+ <dd>Sets the initial zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt>
+ <dd>Sets the minimum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/max-zoom"><code>max-zoom</code></a></dt>
+ <dd>Sets the maximum zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
+ <dd>Controls whether or not the user should be able to change the zoom factor.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
+ <dd>Controls the document's orientation.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="eval" style="font-size: 14px;">@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}</pre>
+
+<h2 id="Specifications" name="Specifications">Specifications</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 Device', '#the-atviewport-rule', '@viewport')}}</td>
+   <td>{{Spec2('CSS3 Device')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>29 (behind a flag) [4]</td>
+   <td>{{CompatNo()}} [2]</td>
+   <td>10 {{property_prefix("-ms")}}</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4</td>
+   <td>29</td>
+   <td>{{CompatNo}} [2]</td>
+   <td>10{{property_prefix("-ms")}}[1]</td>
+   <td>11.10<br>
+    Removed in 15<br>
+    Reintroduced behind a flag in 16</td>
+   <td>{{CompatNo}} [3]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where <code>device-width</code>, when used within <code>@-ms-viewport</code>, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a <code>viewport</code> {{HTMLElement("meta")}} tag, <code>device-width</code> evaluates correctly. According to Microsoft, this bug was fixed in <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Windows Phone 8 Update 3 (a.k.a. GDR3)</a>, although there are some reports that the <a href="http://www.nokia.com/us-en/windows-phone-black-update/">Lumia Black</a> GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">see Tim Kadlec's blog post "Windows Phone 8 and Device-Width"</a>.</p>
+
+<p>[2]: See {{bug(747754, 'summary')}}</p>
+
+<p>[3]: See {{webkitbug(95959)}}</p>
+<p>[4]: See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=235457">Chromium issue #235457: Enable @viewport on all platforms</a></p>
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("meta")}}, specifically <code>&lt;meta name="viewport"&gt;</code></li>
+ <li><a href="/en-US/docs/Mobile/Viewport_meta_tag">Using the viewport meta tag to control layout on mobile browsers</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_first-child/index.html b/files/zh-tw/web/css/_colon_first-child/index.html
new file mode 100644
index 0000000000..195449ca3d
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_first-child/index.html
@@ -0,0 +1,154 @@
+---
+title: ':first-child'
+slug: 'Web/CSS/:first-child'
+tags:
+  - CSS
+  - CSS Pseudo-class
+  - Layout
+  - Reference
+  - Web
+translation_of: 'Web/CSS/:first-child'
+---
+<div>{{CSSRef}}</div>
+
+<p><code>:first-child</code>是<a href="/en-US/docs/Web/CSS">CSS</a>當中的一種<a href="/en-US/docs/Web/CSS/Pseudo-classes">偽類別（pseudo-class）</a>，代表任何身為長子的元素（親元素的第一個子元素）。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="範例_1">範例 1</h3>
+
+<h4 id="HTML_內文">HTML 內文</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;This span is limed!&lt;/span&gt;
+  &lt;span&gt;This span is not. :(&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_內文">CSS 內文</h4>
+
+<pre class="brush: css">span:first-child {
+    background-color: lime;
+}
+</pre>
+
+<p>呈現效果如下：</p>
+
+<p><span>{{EmbedLiveSample('範例_1',300,50)}}</span></p>
+
+<h3 id="範例_2_-_使用_UL">範例 2 - 使用 UL</h3>
+
+<h4 id="HTML_內文_2">HTML 內文</h4>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;List 1&lt;/li&gt;
+  &lt;li&gt;List 2&lt;/li&gt;
+  &lt;li&gt;List 3&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<h4 id="CSS_內文_2">CSS 內文</h4>
+
+<pre class="brush: css">li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}</pre>
+
+<p>呈現效果如下：</p>
+
+<p><span>{{EmbedLiveSample('範例_2_-_使用_UL',300,100)}}</span></p>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>無變更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>無變更</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>4.0</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>7<sup>[1]</sup></td>
+   <td>9.5</td>
+   <td>4</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>功能</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>基礎支援</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>7<sup>[1]</sup></td>
+   <td>10.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] 在不重新載入網頁的情況下，Internet Explorer 7 的樣式表並不會套用在動態新增的元素上。在 Internet Explorer 8，若元素是以點擊連結而形成的，則 <code>first-child</code> 在該連結不被選取後才有作用。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref(":last-child")}}</li>
+ <li>{{cssxref(":nth-child")}}</li>
+ <li>{{cssxref(":last-of-type")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_first-of-type/index.html b/files/zh-tw/web/css/_colon_first-of-type/index.html
new file mode 100644
index 0000000000..93a524c4b7
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_first-of-type/index.html
@@ -0,0 +1,162 @@
+---
+title: ':first-of-type'
+slug: 'Web/CSS/:first-of-type'
+tags:
+  - CSS
+  - CSS 虛擬類別
+  - 參考
+  - 外觀
+  - 網頁
+translation_of: 'Web/CSS/:first-of-type'
+---
+<div>{{CSSRef}}</div>
+
+<p>在 CSS <code><a href="/en-US/docs/Web/CSS/Pseudo-classes">虛擬類別（pseudo-class）</a>中，</code><strong><code>:first-of-type </code></strong><code>代表本節點為兄弟節點中第一個此類型節點。</code></p>
+
+<pre class="brush: css no-line-numbers">/* 選取第一個出現在父節點下的&lt;p&gt;，不考慮其在所有子節點中的位置。 */
+p:first-of-type {
+  color: red;
+}</pre>
+
+<div class="note">
+<p><span style="font-size: 14px;"><strong>附註</strong></span>: 在初始定義中，被選取的節點必須擁有父節點。從選取器層級4（Selectors Level 4）開始已經不再有這個限制了。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="例一：選取第一段文章">例一：選取第一段文章</h3>
+
+<p>來考慮以下 HTML:</p>
+
+<pre class="brush: html">&lt;h2&gt;Heading&lt;/h2&gt;
+
+&lt;p&gt;Paragraph&lt;/p&gt;
+
+&lt;p&gt;Paragraph&lt;/p&gt;</pre>
+
+<p>及 CSS:</p>
+
+<pre class="brush: css">p:first-of-type {
+  color: red;
+}</pre>
+
+<p>會有這樣的效果 － 只有第一段文章變為紅色，因為它是 body 中第一個文章節點：</p>
+
+<p>{{EmbedLiveSample('Example_1_Simple_first_paragraph')}}</p>
+
+<h3 id="例二：預定通用選擇器（Assumed_universal_selector）">例二：預定通用選擇器（Assumed universal selector）</h3>
+
+<p>這個範例展示了當沒有指定一般選擇器（simple selector）時，通用選擇器是如何被預判。</p>
+
+<p id="HTML">首先來看 HTML：</p>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;This `span` is first!&lt;/span&gt;
+  &lt;span&gt;But this `span` isn't.&lt;/span&gt;
+  &lt;span&gt;This &lt;em&gt;nested `em` is&lt;/em&gt;!&lt;/span&gt;
+  &lt;span&gt;And so is this &lt;span&gt;nested `span`&lt;/span&gt;!&lt;/span&gt;
+  &lt;b&gt;This `b` qualifies!&lt;/b&gt;
+  &lt;span&gt;This final `span` does not.&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<p id="CSS">接著是 CSS：</p>
+
+<pre class="brush: css">div :first-of-type {
+  background-color: lime;
+}</pre>
+
+<p id="Result">會有這樣的效果:</p>
+
+<p>{{EmbedLiveSample('Example_2_Assumed_universal_selector','100%', '120')}}</p>
+
+<h2 id="特定規格">特定規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">附註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>配對節點不需要具有父節點。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>初始定義。</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>9.0</td>
+   <td>10.0</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{Cssxref(":first-child")}}</li>
+ <li>{{Cssxref(":last-of-type")}}</li>
+ <li>{{Cssxref(":nth-of-type")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_lang/index.html b/files/zh-tw/web/css/_colon_lang/index.html
new file mode 100644
index 0000000000..f79d142f09
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_lang/index.html
@@ -0,0 +1,98 @@
+---
+title: ':lang()'
+slug: 'Web/CSS/:lang'
+translation_of: 'Web/CSS/:lang'
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>:lang()</code></strong> 是一種 <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">偽類 ( pseudo-class )</a>。它會根據括號中指定的語系，來選擇使用的元素。</p>
+
+<pre class="brush: css no-line-numbers">/* 選取任何語言屬性為英文 (en) 的 &lt;p&gt; */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}</pre>
+
+<div class="note">
+<p><strong>注意：</strong> 在 HTML 中，語言是通過 {{htmlattrxref("lang")}} 屬性和 {{HTMLElement("meta")}} 元素的組合來決定的, 也可能是通過協議的信息來確定 (例如 HTTP 表頭). 對於其他文檔類型，也可能存在其他用於確定語言的方法。</p>
+</div>
+
+<h2 id="語法_Syntax">語法 Syntax</h2>
+
+<h3 id="語法格式_Formal_syntax">語法格式 Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h3 id="參數_Parameter">參數 Parameter</h3>
+
+<dl>
+ <dt><code>&lt;language-code&gt;</code></dt>
+ <dd>{{cssxref("&lt;string&gt;")}} 代表你要指定的語言。可接受的值為 <a href="/en-US/docs/Web/HTML">HTML</a> 規範中指定的值。</dd>
+</dl>
+
+<h2 id="範例_Example">範例 Example</h2>
+
+<p>在此例中，<code>:lang()</code> 偽類 會依據 “引用元素 quote” ({{htmlElement("q")}}) 的父層來選擇 <a href="/en-US/docs/Web/CSS/Child_selectors">子組合子 ( child combinators )</a>。 請注意，此處演示的方法並不是唯一的，並且最好的方式，是依據文檔類型來確定。還要注意的是， {{glossary("Unicode")}} 的值，有明確指定到那些你要使用的字符。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div lang="en"&gt;&lt;q&gt;This English quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="fr"&gt;&lt;q&gt;This French quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+&lt;div lang="de"&gt;&lt;q&gt;This German quote has a &lt;q&gt;nested&lt;/q&gt; quote inside.&lt;/q&gt;&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">:lang(en) &gt; q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) &gt; q { quotes: '« ' ' »'; }
+:lang(de) &gt; q { quotes: '»' '«' '\2039' '\203A'; }
+</pre>
+
+<h3 id="結果_Result">結果 Result</h3>
+
+<p>{{EmbedLiveSample('Example', 350)}}</p>
+
+<h2 id="技術規格_Specifications">技術規格 Specifications</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('CSS4 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Adds wildcard language matching and comma-separated list of languages.<br>
+    添加萬用字符語言匹配，且逗號分隔語言列表。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>沒有重大變化。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>初步定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性_Browser_compatibility">瀏覽器兼容性 Browser compatibility</h2>
+
+<div>
+<div class="hidden">此頁面上的兼容性表，由結構化數據生成。如果您想為數據做出貢獻，請查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並向我們發送拉取請求。</div>
+
+<p>{{Compat("css.selectors.lang")}}</p>
+</div>
+
+<h2 id="其他參考_See_also">其他參考 See also</h2>
+
+<ul>
+ <li>語言相關偽類： {{cssxref(":lang")}}, {{cssxref(":dir")}}</li>
+ <li>HTML {{htmlattrxref("lang")}} 屬性</li>
+ <li><a class="external" href="https://tools.ietf.org/html/bcp47">BCP 47 - Tags for Identifying Languages (BCP 47 - 識別語言的標籤)</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_colon_target/index.html b/files/zh-tw/web/css/_colon_target/index.html
new file mode 100644
index 0000000000..74d1767fb9
--- /dev/null
+++ b/files/zh-tw/web/css/_colon_target/index.html
@@ -0,0 +1,275 @@
+---
+title: ':target'
+slug: 'Web/CSS/:target'
+translation_of: 'Web/CSS/:target'
+---
+<div>{{CSSRef}}</div>
+
+<p>The<code> :target </code><a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> represents the unique element, if any, with an <strong>id</strong> matching the fragment identifier of the URI of the document..</p>
+
+<p>URIs with fragment identifiers link to a certain element within the document, known as the <em>target element</em>. For instance, here is a URI pointing to an <em>anchor</em> named <span style="border: 1px dotted gray;">section2</span>:<br>
+ <code class="plain">http://example.com/folder/document.html<code style="border: 1px dotted gray;">#section2</code></code><br>
+ The <em>anchor</em> can be any element with an<code> id </code>attribute, e.g.<code> &lt;h1 id="<span style="border: 1px dotted gray;">section2</span>"&gt; </code>in our example. The <em>target element</em><code> h1 </code>can be represented by the<code> :target </code>pseudo-class.</p>
+
+<div class="note"><strong>Note:</strong> The<code> id </code>attribute was new in HTML 4 (December 1997).  In old-style HTML <code>&lt;a&gt;</code> is a target element.  The<code> :target </code>pseudo-class applies to those targets as well.</div>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:css">:target { outline: solid red }  /* draw a red, solid line around the target element */
+</pre>
+
+<pre class="brush:css">/* example code for userContent.css or any web pages;
+   a red/yellow arrow indicates the target element */
+
+:target {
+ -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
+    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
+         box-shadow: 0.2em 0.2em 0.3em #888;
+}
+
+:target:before {
+  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
+  content:        "\25ba";  /* ► */
+  color:          red;
+  background:     gold;
+  border:         solid thin;
+  padding-left:   1px;
+  display:        inline-block;
+  margin-right:   0.13em;
+  vertical-align: 20%;
+}
+</pre>
+
+<h3 id="Working_with_display_none_elements…">Working with display: none elements…</h3>
+
+<p>The <code>:target</code> pseudo-class also works fine with <strong>undisplayed elements</strong>:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8"&gt;
+&lt;title&gt;:target pseudoclass example&lt;/title&gt;
+&lt;style&gt;
+#newcomment {
+  display: none;
+}
+
+#newcomment:target {
+  display: block;
+}
+&lt;/style&gt;
+
+&lt;/head&gt;
+&lt;body&gt;
+ &lt;p&gt;&lt;a href="#newcomment"&gt;Add a comment&lt;/a&gt;&lt;/p&gt;
+ &lt;div id="newcomment"&gt;
+  &lt;form&gt;
+  &lt;p&gt;Write your comment:&lt;br /&gt;
+  &lt;textarea&gt;&lt;/textarea&gt;&lt;/p&gt;
+  &lt;/form&gt;
+ &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Creating_a_pure_CSS_lightbox">Creating a pure CSS "lightbox"</h3>
+
+<p>The <code>:target</code> pseudo-class is useful to switch on/off some invisible elements. In this way you can create a pure-CSS lightbox (<a href="https://developer.mozilla.org/files/4607/lightbox.html">live demo</a>).</p>
+
+<div style="height: 400px; margin-bottom: 12px; overflow: auto;">
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="UTF-8" /&gt;
+&lt;title&gt;MDN Example &amp;ndash; CSS Lightbox&lt;/title&gt;
+&lt;style type="text/css"&gt;
+div.lightbox {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+div.lightbox:target {
+  display: table;
+}
+
+div.lightbox figure {
+  display: table-cell;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+div.lightbox figure figcaption {
+  display: block;
+  margin: auto;
+  padding: 8px;
+  background-color: #ddbbff;
+  height: 250px;
+  position: relative;
+  overflow: auto;
+  border: 1px #000000 solid;
+  border-radius: 10px;
+  text-align: justify;
+  font-size: 14px;
+}
+
+div.lightbox figure .closemsg {
+  display: block;
+  margin: auto;
+  height: 0;
+  overflow: visible;
+  text-align: right;
+  z-index: 2;
+  cursor: default;
+}
+
+div.lightbox figure .closemsg, div.lightbox figure figcaption {
+  width: 300px;
+}
+
+.closemsg::after {
+  content: "\00D7";
+  display: inline-block;
+  position: relative;
+  right: -20px;
+  top: -10px;
+  z-index: 3;
+  color: #ffffff;
+  border: 1px #ffffff solid;
+  border-radius: 10px;
+  width: 20px;
+  height: 20px;
+  line-height: 18px;
+  text-align: center;
+  margin: 0;
+  background-color: #000000;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.closemsg::before {
+  content: "";
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.85;
+}
+&lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+
+&lt;h1&gt;Pure CSS Lightbox&lt;/h1&gt;
+
+&lt;p&gt;Some sample text&amp;hellip;&lt;/p&gt;
+
+&lt;p&gt;[ &lt;a href="#example1"&gt;Open example #1&lt;/a&gt; | &lt;a href="#example2"&gt;Open example #2&lt;/a&gt; ]&lt;/p&gt;
+
+&lt;p&gt;Another sample text&amp;hellip;&lt;/p&gt;
+
+&lt;div class="lightbox" id="example1"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.&lt;br /&gt;
+    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;div class="lightbox" id="example2"&gt;
+  &lt;figure&gt;
+    &lt;a href="#" class="closemsg"&gt;&lt;/a&gt;
+    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.&lt;/figcaption&gt;
+  &lt;/figure&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>1.0</td>
+   <td>{{CompatGeckoDesktop("1.3")}}</td>
+   <td>9</td>
+   <td>9.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{CompatGeckoMobile("1.3")}}</td>
+   <td>9.0</td>
+   <td>9.5</td>
+   <td>2.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_the_:target_selector">使用 :target</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/_doublecolon_first-letter/index.html b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
new file mode 100644
index 0000000000..b9d4c7a6f9
--- /dev/null
+++ b/files/zh-tw/web/css/_doublecolon_first-letter/index.html
@@ -0,0 +1,206 @@
+---
+title: '::first-letter (:first-letter)'
+slug: 'Web/CSS/::first-letter'
+translation_of: 'Web/CSS/::first-letter'
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="概要">概要</h2>
+
+<p><code>::first-letter</code> <a href="/zh-TW/CSS" title="CSS">CSS</a> <a href="/zh-TW/CSS/Pseudo-elements" title="Pseudo-elements">虛擬元素</a>選取了一個區塊第一行的第一個字母，如果那一行前面沒有其他內容（例如圖片或是行內表格）。</p>
+
+<p>The first letter of an element is not necessarily trivial to identify:</p>
+
+<ul>
+ <li>Punctuation, that is any characters defined in Unicode in the <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf) and <em>other punctuation</em> (Po) classes, preceding or immediately following the first letter is also matched by this pseudo-element.</li>
+ <li>Similarly some languages have digraphs that are always capitalized together, like the <code>IJ</code> in Dutch. In these rare cases, both letters of the digraph should be matched by the <code>::first-letter</code> pseudo-element. (This is poorly supported by browsers, check the <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">browser compatibility table</a>).</li>
+ <li>Finally, a combination of the {{ cssxref("::before") }} pseudo-element and the {{ cssxref("content") }} property may inject some text at the beginning of the element. In that case, <code>::first-letter</code> will match the first letter of this generated content.</li>
+</ul>
+
+<p>A first line has meaning only in a <a href="/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes" title="https://developer.mozilla.org/en/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-container box</a>, therefore the <code>::first-letter</code> pseudo-element has an effect only on elements with a {{ cssxref("display") }} value of <code>block</code>, <code>inline-block</code>, <code>table-cell</code>, <code>list-item</code> or <code>table-caption</code>. In all other cases, <code>::first-letter</code> has no effect.</p>
+
+<p>Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the <code>::first-letter</code> pseudo-element:</p>
+
+<ul>
+ <li>All font properties : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} and {{ Cssxref("font-family") }}.</li>
+ <li>All background properties : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, and {{cssxref("background-blend-mode")}}.</li>
+ <li>All margin properties: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
+ <li>All padding properties: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
+ <li>All border properties: the shorthands {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, and the longhands properties.</li>
+ <li>The {{ cssxref("color") }} property.</li>
+ <li>The {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (only if <code>float</code> is <code>none</code>) CSS properties.</li>
+</ul>
+
+<p>As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.</p>
+
+<div class="note">
+<p>In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.</p>
+
+<p>As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.</p>
+
+<p>If legacy browsers must be supported, <code>:first-letter</code> is the only viable choice; if not, <code>::first-letter</code> is preferred.</p>
+</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>Make the first letter of every paragraph red and big.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+  sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy amet.&lt;/p&gt;
+&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
+&lt;p&gt;Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
+  iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
+  nulla facilisi.&lt;/p&gt;
+&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
+&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
+&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">p::first-letter { /* Use :first-letter if support for IE 8 or earlier is needed */
+  color: red;
+  font-size: 130%;
+}</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', 679, 390) }}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
+   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
+   <td>Generalized allowed properties to typesetting, text decoration and inline layout properties, {{ cssxref("opacity") }} and {{ cssxref("box-shadow") }}.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
+   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
+   <td>Allowed the usage of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td>Defined edge-case behavior like in list items, or with language specific behavior (like the Dutch digraph <code>IJ</code>). The two-colon syntax for pseudo-elements has been introduced.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>No significant change, though CSS Level 2 still used the one-colon syntax.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>The initial definition used the one-colon syntax.</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>9.0</td>
+   <td>7.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.5</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }} {{ bug("92176") }} </td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatNo() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Old one-colon syntax (<code>:first-letter</code>)</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+  <tr>
+   <td>Support for the Dutch digraph <code>IJ</code></td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatNo() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref("::first-line")}} 虛擬元素。</li>
+</ul>
diff --git a/files/zh-tw/web/css/animation-fill-mode/index.html b/files/zh-tw/web/css/animation-fill-mode/index.html
new file mode 100644
index 0000000000..9ac0552304
--- /dev/null
+++ b/files/zh-tw/web/css/animation-fill-mode/index.html
@@ -0,0 +1,158 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+translation_of: Web/CSS/animation-fill-mode
+---
+<div> </div>
+
+<p><strong><code>animation-fill-mode</code></strong>  <a href="/en/CSS" title="CSS">CSS</a> 属性指定CSS动画应该如何在其执行前后的样式展示情况。</p>
+
+<pre class="brush: css no-line-numbers">/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+</pre>
+
+<p>使用提示<code> animation </code>来一次设置所有动画属性通常很方便。</p>
+
+<h2 id="语法">语法</h2>
+
+<h3 id="属性值">属性值</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>不执行动画时，动画不会应用任何样式。该元素会使用其<strong><code>keyframes</code></strong>关键动画帧规则来显示动画。这是默认值。</dd>
+ <dt><code>forwards</code></dt>
+ <dd>动画执行后停留到最后一个关键帧动画的计算值，<code><strong>简单来说执行结束动画会停留到结束时候的状态</strong></code>，不会是动画执行之前的效果。比如一个元素从左往右运动，添加当前属性值 <strong><code>forwards</code></strong> 元素会停留到动画执行结束后的右边而不是最初的左边。可以看以下图</dd>
+ <dt><a href="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif"><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_forwards.gif" style="height: 736px; width: 1723px;"></a></dt>
+ <dd>当然最后动画停留显示的关键帧会取决于 <code>"animation-direction"</code> 和 <code>"animation-iteration-count"</code>这两个属性 运行方向和运行次数:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col"><code>animation-iteration-count</code></th>
+    <th scope="col">last keyframe encountered</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code></td>
+    <td>偶数或奇数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code></td>
+    <td>偶数或奇数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>偶数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate</code></td>
+    <td>奇数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>偶数值</td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+   <tr>
+    <td><code>alternate-reverse</code></td>
+    <td>奇数值</td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>backwards</code></dt>
+ <dd>与上面 <strong><code>forwards</code></strong> 值效果相反，动画执行后停留到第一个关键帧动画，准确说是<code><strong>没有执行动画之前的初始状态</strong></code>。</dd>
+ <dd>【（the animation will apply the values defined in the first relevant <a href="https://developer.mozilla.org/en-US/docs/CSS/@keyframes">keyframe</a> as soon as it is applied to the target, and retain this during the <code>"animation-delay"</code> period.）原文大概意思是会停留第一个关键帧，并会保留 <code>"animation-delay"</code> 延迟属性的所设定周期。】</dd>
+ <dd>会在延迟之后才开始执行关键帧动画，而不是一开始使用第一帧进行停留，具体可以结合<code><strong>both</strong></code>的例子进行尝试。</dd>
+ <dd><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_backwards.gif" style="height: 736px; width: 1698px;"></dd>
+ <dd>第一个相关关键帧会取决于 <code>"animation-direction"</code> 方向属性:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col"><code>animation-direction</code></th>
+    <th scope="col">first relevant keyframe</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>normal</code> 或 <code>alternate</code></td>
+    <td><code>0%</code> 或 <code>from</code></td>
+   </tr>
+   <tr>
+    <td><code>reverse</code> 或 <code>alternate-reverse</code></td>
+    <td><code>100%</code> 或 <code>to</code></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<dl>
+ <dt><code>both</code></dt>
+ <dd>动画将遵循开始和结束后的帧动画进行停留，也就是说会从第一帧开始停留显示，动画执行之后会停留到动画结束时的状态。</dd>
+ <dt><img alt="" src="https://gitee.com/yoonasy/externalLink/raw/master/animation-fill-mode_both.gif" style="height: 755px; width: 1698px;"></dt>
+ <dd>与上面两个值的差别是，如果元素使用 <code><strong>forwards</strong></code>、<code><strong>backwards</strong></code> 两个值会在没有添加动画之前的展示状态进行停留，执行动画的时候才会开始执行关键帧，有这么一些细小的差别。</dd>
+</dl>
+
+<div class="note">
+<p><strong>PS</strong>: 当您在一个<code>animation-*</code>属性上指定多个逗号分隔的值时，它们将被分配给 <code>"animationname"</code> 属性中指定的动画，这取决于有多少动画。有关更多信息，请参见<a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">设置多个动画属性值</a>。</p>
+</div>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>You can see the effect of <code>animation-fill-mode</code> in the following example. It demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default).</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Move your mouse over the gray box!&lt;/p&gt;
+&lt;div class="demo"&gt;
+ &lt;div class="growsandstays"&gt;This grows and stays big.&lt;/div&gt;
+  &lt;div class="grows"&gt;This just grows.&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}</pre>
+
+<p> </p>
+
+<p>查看 <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a> 更多有關的例子</p>
+
+<h2 id="相關鏈接">相關鏈接</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
+ <li>JavaScript {{domxref("AnimationEvent")}} API</li>
+</ul>
diff --git a/files/zh-tw/web/css/attr()/index.html b/files/zh-tw/web/css/attr()/index.html
new file mode 100644
index 0000000000..7cce14ec01
--- /dev/null
+++ b/files/zh-tw/web/css/attr()/index.html
@@ -0,0 +1,200 @@
+---
+title: attr
+slug: Web/CSS/attr()
+translation_of: Web/CSS/attr()
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><code>attr()</code> <a href="/zh-TW/docs/Web/CSS">CSS</a> 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。</p>
+
+<p><code>attr()</code> 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:js notranslate">/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* With type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* With fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>attribute-name</code></dt>
+ <dd>在 CSS 中參考之 HTML 元素的屬性名稱。</dd>
+ <dt><code>&lt;type-</code>or-unit&gt; {{experimental_inline}}</dt>
+ <dd>Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <code>&lt;type-or-unit&gt;</code> as a value for the given attribute is invalid, the <code>attr()</code> expression will be invalid too. If omitted, it defaults to <code>string</code>. The list of valid values are:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">Keyword</th>
+    <th scope="col">Associated type</th>
+    <th scope="col">Comment</th>
+    <th scope="col">Default value</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>string</code></td>
+    <td>{{cssxref("&lt;string&gt;")}}</td>
+    <td>The attribute value is treated as a CSS {{cssxref("&lt;string&gt;")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.</td>
+    <td>An empty string</td>
+   </tr>
+   <tr>
+    <td><code>color</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;color&gt;")}}</td>
+    <td>The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("&lt;string&gt;")}} value.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>currentColor</code></td>
+   </tr>
+   <tr>
+    <td><code>url</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;uri&gt;")}}</td>
+    <td>The attribute value is parsed as a string that is used inside a CSS <code>url()</code>function.<br>
+     Relative URL are resolved relatively to the original document, not relatively to the style sheet.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td>The url <code>about:invalid</code> that points to a non-existent document with a generic error condition.</td>
+   </tr>
+   <tr>
+    <td><code>integer</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;integer&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;integer&gt;")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>number</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;number&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>length</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;length&gt;")}} dimension, that is including the unit (e.g. <code>12.5em</code>). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;length&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;length&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given unit is a relative length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0</code>, or, if <code>0</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>angle</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;angle&gt;")}} dimension, that is including the unit (e.g. <code>30.5deg</code>). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;angle&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an {{cssxref("&lt;angle&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0deg</code>, or, if <code>0deg</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>time</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;time&gt;")}} dimension, that is including the unit (e.g. <code>30.5ms</code>). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>s</code>, <code>ms</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;time&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as an{{cssxref("&lt;time&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0s</code>, or, if <code>0s</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>frequency</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;frequency&gt;")}} dimension, that is including the unit (e.g. <code>30.5kHz</code>). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>Hz</code>, <code>kHz</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;frequency&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;frequency&gt;")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0Hz</code>, or, if <code>0Hz</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+   <tr>
+    <td><code>%</code> {{experimental_inline}}</td>
+    <td>{{cssxref("&lt;percentage&gt;")}}</td>
+    <td>The attribute value is parsed as a CSS {{cssxref("&lt;number&gt;")}}, that is without the unit (e.g. <code>12.5</code>), and interpreted as a {{cssxref("&lt;percentage&gt;")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.<br>
+     If the given value is used as a length, <code>attr()</code>computes it to an absolute length.<br>
+     Leading and trailing spaces are stripped.</td>
+    <td><code>0%</code>, or, if <code>0%</code> is not a valid value for the property, the property's minimum value.</td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+ <dt><code>&lt;fallback&gt;</code> {{experimental_inline}}</dt>
+ <dd>The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where <code>attr()</code> is used, even if it is not used, and must not contain another <code>attr()</code> expression. If <code>attr()</code> is not the sole component value of a property, its <code>&lt;fallback&gt;</code> value must be of the type defined by <code>&lt;type-or-unit&gt;</code>. If not set, CSS will use the default value defined for each <code>&lt;type-or-unit&gt;</code>.</dd>
+</dl>
+
+<h3 id="形式語法">形式語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: css notranslate">p::before {
+  content: attr(data-foo) " ";
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;p data-foo="hello"&gt;world&lt;/p&gt;
+</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Examples", '100%', '80')}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}</td>
+   <td>{{Spec2('CSS3 Values')}}</td>
+   <td>Added two optional parameters; can be used on all properties; may return other values than {{cssxref("&lt;string&gt;")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Limited to the {{cssxref("content")}} property; always return a {{cssxref("&lt;string&gt;")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{Compat("css.types.attr")}}</p>
diff --git a/files/zh-tw/web/css/background-attachment/index.html b/files/zh-tw/web/css/background-attachment/index.html
new file mode 100644
index 0000000000..138623a543
--- /dev/null
+++ b/files/zh-tw/web/css/background-attachment/index.html
@@ -0,0 +1,151 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+  - CSS
+  - CSS Background
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/background-attachment
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-attachment</code></strong> 這個 <a href="/en-US/docs/CSS">CSS</a> 屬性能夠設定，背景圖片的位置是否要固定在 {{glossary("viewport")}}（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/background-attachment.html")}}</div>
+
+
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+</pre>
+
+<p><code>background-attachment</code> 屬性的值，可以是下方清單中的其中之一。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>fixed</code></dt>
+ <dd>讓背景相對於 viewport（視圖）的移動是固定的。即便元素中的內容是可滾動的，背景也不會在滾動元素內容時跟著移動。(這個屬性與 {{cssxref("background-clip", "background-clip: text", "#text")}} 不相容。)</dd>
+ <dt><code>local</code></dt>
+ <dd>讓背景相對於元素的內容是固定的，且背景在滾動元素的內容時會跟著移動。另外，背景的繪製與定位區域是相對於元素的可滾動區域，而不是包裹著它們的邊框。</dd>
+ <dt><code>scroll</code></dt>
+ <dd>讓背景相對於元素本身是固定的，使背景在滾動元素的內容時不會跟著移動。（It is effectively attached to the element's border.）</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples" name="Examples">例子</h2>
+
+<h3 id="Simple_example">Simple example</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Simple_example")}}</p>
+
+<h3 id="Multiple_background_images">Multiple background images</h3>
+
+<p>這個屬性支援多個背景圖片。你可以對每個背景設定不同的 <code>&lt;attachment&gt;</code>。每個背景圖片會依序對應在 <code>&lt;attachment&gt;</code> 設定的類型。</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;p&gt;
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+&lt;/p&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush:css; highlight:[3];">p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}</pre>
+
+<h4 id="Result_2">Result</h4>
+
+<p>{{EmbedLiveSample("Multiple_background_images")}}</p>
+
+<h2 id="Specifications">Specifications</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', '#the-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>The shorthand property has been extended to support multiple backgrounds and the <code>local</code> value.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>No significant change.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.background-attachment")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Using multiple backgrounds</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/background-color/index.html b/files/zh-tw/web/css/background-color/index.html
new file mode 100644
index 0000000000..3c5cea28b3
--- /dev/null
+++ b/files/zh-tw/web/css/background-color/index.html
@@ -0,0 +1,115 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+translation_of: Web/CSS/background-color
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>background-color</code></strong> <a href="/en/CSS" title="CSS">CSS</a> property 是用來設定HTML元素的背景顏色，值可以是顏色亦可以是特定關鍵字－－ <code>transparent</code>.</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css">background-color: red;
+background-color: rgb(255, 255, 128);
+background-color: hsla(50, 33%, 25%, 0.75);
+background-color: currentColor;
+background-color: transparent;
+background-color: #bbff00;
+
+background-color: inherit;
+</pre>
+
+<h3 id="參數">參數</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>一個 CSS {{cssxref("&lt;color&gt;")}} 用來表示一致的背景顏色。即便設定了一個或多個 {{cssxref("background-image")}} ，背景渲染上依舊會渲染這顏色，若是圖片並非不透明圖，在透明區域就能看見。在 CSS 中， <code>transparent</code> 是一種顏色</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="exampleone"&gt;
+ Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="exampletwo"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;
+
+&lt;div class="examplethree"&gt;
+  Lorem ipsum dolor sit amet, consectetuer
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("範例","200","150")}}</p>
+
+<h2 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', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>技術上來說，移除了 <code>transparent</code> 關鍵字，但實際上並未發生任何改變，因為它被列入至正式的 {{cssxref("&lt;color&gt;")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>無變動</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>原始定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("css.properties.background-color")}}</p>
+<h2 id="延伸閱讀">延伸閱讀</h2>
+
+<ul>
+ <li>
+  <p><a href="/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">複數背景</a></p>
+ </li>
+</ul>
diff --git a/files/zh-tw/web/css/border-image/border-image/index.html b/files/zh-tw/web/css/border-image/border-image/index.html
new file mode 100644
index 0000000000..210a2663eb
--- /dev/null
+++ b/files/zh-tw/web/css/border-image/border-image/index.html
@@ -0,0 +1,111 @@
+---
+title: border-image
+slug: Web/CSS/border-image/border-image
+tags:
+  - CSS
+---
+<h3 id="摘要">摘要</h3>
+
+<p>CSS 屬性 <code>border-image</code> 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。</p>
+
+<div class="warning"><strong>緊告：</strong>官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 <code>border-width</code> 參數，它覆蓋既有 <code>border-width</code> 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。</div>
+
+<p>瀏覽器會顯示 <code>border-image</code> 指定的圖片而不是 {{ cssxref("border-style") }} 給的邊框樣式，但是若它的取值是 <code>none</code> 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。<code>border-image</code> 會畫一個額外的背景圖片在原來 {{ cssxref("background-image") }} 指 定的背景圖片之上。</p>
+
+<ul>
+ <li>{{ Xref_cssinitial() }}：{{ Cssxref("none") }}</li>
+ <li>對象：所有除了 {{ cssxref("border-collapse") }} 是 <code class="css">collapse</code> 的表格元素</li>
+ <li>{{ Xref_cssinherited() }}：否</li>
+ <li>媒體：{{ Xref_cssvisual() }}</li>
+ <li>{{ Xref_csscomputed() }}：任何 URI 變為絕對，任何 &lt;長度&gt; 變為絕對，其他如同所指定</li>
+</ul>
+
+<h3 id="語法">語法</h3>
+
+<pre class="eval">none |
+  [ &lt;圖片&gt; [ &lt;數字&gt; | &lt;百分比&gt; ]{1,4} [/ &lt;邊框寬度&gt;{1,4}]? ] &amp;&amp; [ stretch | repeat | round ]{0,2} </pre>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt>none</dt>
+ <dd>不顯示圖片，使用邊框樣式。</dd>
+ <dt>&lt;圖片&gt; <small>（必填）</small></dt>
+ <dd>圖片值是一個 {{cssxref("&lt;uri&gt;")}}，例： <code class="plain"> url(http://example.org/image.png)</code> 。</dd>
+ <dt>&lt;數&gt; | &lt;百分比&gt; <small>（必填）</small></dt>
+ <dd>一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離，將圖片切為九塊：四個角、四個邊跟一個中間部份。<br>
+ <img alt="" src="/@api/deki/files/3683/=slice.png" style="float: right;"><br>
+ 一個值的話，該值用於圖片的全部四個邊。<br>
+ 兩個值得話，值用於：一、頂邊與底邊 二、右邊與左邊。<br>
+ 三個值的話，值用於：一、頂邊 二、右邊與左邊 三、底邊。<br>
+ 四個值的情況，四個值分邊用在圖片的頂邊、右邊、底邊、左邊。<br>
+ <br>
+ 在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。<br>
+ <br>
+ <strong>百分比</strong> 由圖片的長度/寬度計算。<br>
+ <strong>數</strong> 但表圖片的像素（若為點陣圖）或向量座標（若為 SVG）。</dd>
+ <dt>&lt;邊框寬度&gt; <small>（選擇性）</small></dt>
+ <dd>如果斜線 <strong>/</strong> 出現在屬性值的話，一個、兩個、三個或是四個在它之後的取值會被當成是 {{ cssxref("border-width") }} 的取值使用。取值的順序如同 {{ cssxref("border-width") }} 。</dd>
+ <dt>stretch | round | repeat <small>（選擇性）</small></dt>
+ <dd>一個或兩個關鍵字，指定邊上的圖片跟中間部份要如何縮放及鋪擺。<br>
+ <strong><code>stretch</code></strong> （預設值）縮放該圖片，使其與配置大小相等。<br>
+ <strong><code>round</code></strong> 鋪擺該圖片，但也縮放它使得被配置範圍鋪滿整數張該圖片。<br>
+ <strong><code>repeat   </code></strong>直接鋪擺該圖片。<br>
+ 第一個關鍵字的對象是頂邊，中間跟底邊的圖片，而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在，則沿用第一個關鍵字的設定。如果兩者皆不存在，預設值為 <code> stretch</code>。</dd>
+</dl>
+
+<h3 id="範例">範例</h3>
+
+<p>[這裡還需要一些活範例]</p>
+
+<pre>#header  { -moz-border-image: url(border.png) 27 27 27 27 round round; }
+
+.button  { -moz-border-image: url(button.png) 0 5 0 5; }
+
+.example { -moz-border-image: url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }
+</pre>
+
+<pre>/* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */
+
+ div     { -moz-border-image: url(bgimage.png) 0; }
+</pre>
+
+<h3 id="瀏覽器兼容性">瀏覽器兼容性</h3>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>瀏覽器</th>
+   <th>最小版本</th>
+   <th>支援</th>
+  </tr>
+  <tr>
+   <td>Internet Explorer</td>
+   <td>---</td>
+   <td>---</td>
+  </tr>
+  <tr>
+   <td>Firefox (Gecko)</td>
+   <td><strong>3.5</strong> (1.9.1)</td>
+   <td><code>-moz-border-image</code></td>
+  </tr>
+  <tr>
+   <td>Opera</td>
+   <td>10.5</td>
+   <td><code>border-image</code></td>
+  </tr>
+  <tr>
+   <td>Safari (WebKit)</td>
+   <td><strong>3.0</strong> (522)</td>
+   <td><code>-webkit-border-image</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="規範">規範</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-background/#border-images" title="http://www.w3.org/TR/css3-background/#border-images">CSS 3 背景與邊界模組 #border-image</a></li>
+</ul>
+
+<p>{{ languages( { "en": "en/CSS/-moz-border-image"} ) }}</p>
diff --git a/files/zh-tw/web/css/border-image/index.html b/files/zh-tw/web/css/border-image/index.html
new file mode 100644
index 0000000000..bd553c7d6e
--- /dev/null
+++ b/files/zh-tw/web/css/border-image/index.html
@@ -0,0 +1,9 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+---
+<p> </p>
+
+<p>This page was auto-generated because a user created a sub-page to this page.</p>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/border/index.html b/files/zh-tw/web/css/border/index.html
new file mode 100644
index 0000000000..b7a8d098e3
--- /dev/null
+++ b/files/zh-tw/web/css/border/index.html
@@ -0,0 +1,134 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Layout
+  - Reference
+translation_of: Web/CSS/border
+---
+<div>{{CSSRef("CSS Borders")}}</div>
+
+<p><span class="seoSummary"><strong><code>border</code></strong> <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> <a href="/en-US/docs/CSS">CSS</a> 屬性可用來設定元素的邊框。</span>它可以設定以下的值 {{Cssxref("border-width")}}、{{Cssxref("border-style")}} 以及 {{Cssxref("border-color")}}。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border.html")}}</div>
+
+
+
+<p>As with all shorthand properties, any omitted sub-values will be set to their <a href="/en-US/docs/Web/CSS/initial_value">initial value</a>. Importantly, <code>border</code> cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., <code>none</code>.</p>
+
+<p>The <code>border</code> shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties.</p>
+
+<h3 id="Borders_vs._outlines">Borders vs. outlines</h3>
+
+<p>Borders and <a href="/en-US/docs/Web/CSS/outline">outlines</a> are very similar. However, outlines differ from borders in the following ways:</p>
+
+<ul>
+ <li>Outlines never take up space, as they are drawn outside of an element's content.</li>
+ <li>According to the spec, outlines don't have to be rectangular, although they usually are.</li>
+</ul>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers">/* style */
+border: solid;
+
+/* width | style */
+border: 2px dotted;
+
+/* style | color */
+border: outset #f33;
+
+/* width | style | color */
+border: medium dashed green;
+
+/* Global values */
+border: inherit;
+border: initial;
+border: unset;
+</pre>
+
+<p>The <code>border</code> property may be specified using one, two, or three of the values listed below. The order of the values does not matter.</p>
+
+<div class="note">
+<p><strong>Note:</strong> The border will be invisible if its style is not defined. This is because the style defaults to <code>none</code>.</p>
+</div>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt id="&lt;line-width>"><code>&lt;line-width&gt;</code></dt>
+ <dd>Sets the thickness of the border. Defaults to <code>medium</code> if absent. See {{Cssxref("border-width")}}.</dd>
+ <dt id="&lt;line-style>"><code>&lt;line-style&gt;</code></dt>
+ <dd>Sets the style of the border. Defaults to <code>none</code> if absent. See {{Cssxref("border-style")}}.</dd>
+ <dt id="&lt;color>">{{cssxref("&lt;color&gt;")}}</dt>
+ <dd>Sets the color of the border. Defaults to <code>currentcolor</code> if absent. See {{Cssxref("border-color")}}.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox"><code>{{csssyntax}}</code></pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;I have a border, an outline, AND a box shadow! Amazing, isn't it?&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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', '#the-border-shorthands', 'border')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Removes <em>specific</em> support for <code>transparent</code>, as it is now a valid {{cssxref("&lt;color&gt;")}}; this has no practical impact.<br>
+    Though it cannot be set to a custom value using the shorthand, <code>border</code> now resets {{cssxref("border-image")}} to its initial value (<code>none</code>).</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Accepts the <code>inherit</code> keyword. Also accepts <code>transparent</code> as a valid color.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border', 'border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.border")}}</p>
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>
diff --git a/files/zh-tw/web/css/box-sizing/index.html b/files/zh-tw/web/css/box-sizing/index.html
new file mode 100644
index 0000000000..058f179918
--- /dev/null
+++ b/files/zh-tw/web/css/box-sizing/index.html
@@ -0,0 +1,94 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Property
+  - Experimental
+  - Reference
+  - border-box
+  - box model
+  - content-box
+translation_of: Web/CSS/box-sizing
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p>The <strong><code>box-sizing</code></strong> property is used to alter the default <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a> used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.</p>
+
+<p><strong><code>box-sizing</code></strong>  屬性 用於更改預設 <a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">CSS 盒子模型</a> 中所計算的寬度和高度。可以使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行為。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="句法">句法</h2>
+
+<pre class="brush: css">/* Keyword values */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Global values */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>content-box</code></dt>
+ <dd>這是根據 CSS 標準的起始值和預設值。 {{Cssxref("width")}}  與  {{Cssxref("height")}} 只包括內容本身的寬和高， 不包括邊框（border）、內邊距（padding）、外邊距（margin）。注意：內邊距、邊框和外邊距都在這個盒子的外部。例如，如果 <code>.box {width: 350px}; 而且 {border: 10px solid black;}</code> ，那麼在瀏覽器中的渲染該容器的實際寬度將是370px，;<br>
+ <br>
+ 簡單來說，尺寸計算公式：width = 內容的寬度，height = 內容的高度。寬度和高度都不包含內容的邊框（border）和內邊距（padding）。</dd>
+ <dt><code>border-box</code></dt>
+ <dd> {{Cssxref("width")}} 和 {{Cssxref("height")}} 屬性包括內容（content），內邊距（padding）和邊框（border），但不包括外邊距（margin）。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的<a href="https://developer.mozilla.org/en-US/docs/CSS/Box_model" title="CSS/Box_model">盒模型</a>。注意，內邊距和邊框都將在盒子內 ，例如，<code>.box {width: 350px; border: 10px solid black;} </code>，渲染出的容器寬度會固定在 350px，而內容（content）的寬度就會變成 330px， 因為邊框（border）佔了20px。內容框不能為負，並且進位到 0，使得不可能使用 border-box 使元素消失。<br>
+ <br>
+ 這裡的維度計算為：</dd>
+ <dd><em>width = border + padding + 內容的  width</em>，</dd>
+ <dd><em>height = border + padding + 內容的 height</em>。</dd>
+ <dt><code>padding-box</code> {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>The {{Cssxref("width")}} and {{Cssxref("height")}} properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in Firefox 50.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">/* support Firefox, Chrome, Safari, Opera, IE8+ and old Android */
+
+.example {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}</pre>
+
+<h2 id="Specifications">Specifications</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 Basic UI', '#box-sizing', 'box-sizing')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.properties.box-sizing")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS box model</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/clip/index.html b/files/zh-tw/web/css/clip/index.html
new file mode 100644
index 0000000000..900be65c41
--- /dev/null
+++ b/files/zh-tw/web/css/clip/index.html
@@ -0,0 +1,174 @@
+---
+title: clip
+slug: Web/CSS/clip
+translation_of: Web/CSS/clip
+---
+<div>{{CSSRef}}{{deprecated_header}}</div>
+
+<h2 id="總結">總結</h2>
+
+<p><strong><code>這個 clip</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 屬性用來定義元素的哪一個部分是可見的. <code>clip</code> 屬性只能被賦予在絕對位置的元素(element)上, 像是帶有這些的CSS屬性的元素 {{cssxref("position","position:absolute")}} or {{cssxref("position","position:fixed")}}.</p>
+
+<div class="warning">
+<p><strong>警告:</strong> 這個屬性被遺棄了. 請改用 {{cssxref("clip-path")}} .</p>
+</div>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword value */
+clip: auto;
+
+/* &lt;shape&gt; values */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Global values */
+clip: inherit;
+clip: initial;
+clip: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>A rectangular {{cssxref("&lt;shape&gt;")}} of the form <code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> or of the form <code>rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)</code> (which is a more backwards compatible syntax) <code>&lt;top&gt;</code> and <code>&lt;bottom&gt;</code> specify offsets from the <em>inside top border edge</em> of the box, and <code>&lt;right&gt;</code>, and <code>&lt;left&gt;</code> specify offsets from the <em>inside left border edge</em> of the box — that is, the extent of the padding box.</dd>
+ <dd><code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code>, and <code>&lt;left&gt;</code> may either have a {{cssxref("&lt;length&gt;")}} value or<code> auto</code>. If any side's value is <code>auto</code>, the element is clipped to that side's <em>inside border edge</em>.</dd>
+ <dt><code>auto</code></dt>
+ <dd>The element does not clip (default value). Note that this is distinct from <code>rect(auto, auto, auto, auto)</code>, which does clip to the inside border edges of the element.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush:css">.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* standard syntax, unsupported by Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* non-standard syntax, but supported by all major browsers*/
+}</pre>
+
+<pre class="brush:html">&lt;p class="dotted-border"&gt;
+   &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original Graphic" /&gt;
+   &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
+   &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
+   &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
+&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Examples', '689px', '410px')}}</p>
+
+<h2 id="Specifications">Specifications</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('CSS Masks', '#clip-property', 'clip')}}</td>
+   <td>{{Spec2('CSS Masks')}}</td>
+   <td>Deprecates <code>clip</code> property, suggests {{cssxref("clip-path")}} as replacement.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>clip</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>1.0 (1.0)</td>
+   <td>4.0[1]</td>
+   <td>7.0</td>
+   <td>1.0 (85)[1]</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer up to version 7.0 and Safari up to at least 5.1.7 incorrectly interpret <code>clip: auto</code> as <code>clip: rect(auto, auto, auto, auto)</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/common_css_questions/index.html b/files/zh-tw/web/css/common_css_questions/index.html
new file mode 100644
index 0000000000..b824c671c4
--- /dev/null
+++ b/files/zh-tw/web/css/common_css_questions/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS 一般問題
+slug: Web/CSS/Common_CSS_Questions
+tags:
+  - CSS
+  - 待審閱技術
+  - 待審閱文字
+  - 所有類別
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<p>
+</p>
+<h4 id=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4" name=".E6.88.91.E7.9A.84_CSS_.E5.90.88.E4.B9.8E.E8.A6.8F.E6.A0.BC.EF.BC.8C.E4.BD.86.E7.B9.AA.E5.87.BA.E7.9A.84.E7.89.88.E9.9D.A2.E6.9C.89.E8.AA.A4"> 我的 CSS 合乎規格，但繪出的版面有誤 </h4>
+<p>如果想讓大部分的瀏覽器都能正確繪製標準 HTML/CSS 頁面，便須於 HTML 檔案中放上完整的正確 DOCTYPE。
+</p><p>新近瀏覽器都有兩種佈局模式：
+</p>
+<ul><li> <i>Quirks 模式</i>：也稱為相容模式，讓舊網頁能依照以前舊瀏覽器的方式顯現。
+</li><li> <i>標準模式</i>：瀏覽器將依循 W3C 規範決定網頁的顯示方式。
+</li></ul>
+<p>以 Gecko 為核心的瀏覽器都有第三種<i><a href="zh_tw/Gecko_%e8%bf%91%e4%b9%8e%e6%a8%99%e6%ba%96%e6%a8%a1%e5%bc%8f">近乎標準</a></i>模式，其中只有一些些不合規範的地方。
+</p><p>如果你宣告的 DTD 不合標準或過期了，那麼瀏覽器就會進入 Quirks 模式。
+</p><p>以下是常用的 DTD 列表，可以讓瀏覽器進入標準或近乎標準模式。
+</p>
+<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd"&gt;
+
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+
+&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
+</pre>
+<h4 id="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5" name="id_.E8.88.87_class_.E4.B9.8B.E9.96.93.E7.9A.84.E5.B7.AE.E5.88.A5"> <code>id</code> 與 <code>class</code> 之間的差別 </h4>
+<p>HTML 元素都可有 <code>id</code> 及 <code>class</code> 屬性。<code>id</code> 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複；<code>class</code> 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 <code>class</code> 屬性值相同。) CSS 可以讓你以 <code>id</code> 或 <code>class</code> 來決定某元素的樣式。
+</p><p>如果你想指定某特定單一元素的樣式，則應使用 <code>id</code>。
+</p>
+<hr>
+<p>若有很多個元素皆有相同樣式，則可使用 <code>class</code>。
+</p><p>這方面的資訊亦可參考 <a href="zh_tw/CSS/Getting_Started/Selectors">CSS 選取符</a>。
+</p>
+<hr>
+<h4 id=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC" name=".E6.81.A2.E5.BE.A9.E6.9F.90.E7.89.B9.E6.80.A7.E7.9A.84.E9.A0.90.E8.A8.AD.E5.80.BC"> 恢復某特性的預設值 </h4>
+<p>CSS2 並不提供任何指定某特性預設值的方法，所以要恢復某特性預設值的唯一方法就是重新指定此值。此外你自己得知道預設值是什麼，因為 CSS 也沒有所謂 <i>default</i> 的關鍵字。
+</p><p>所以，以選取符撰寫樣式時須特別注意 (例如以標籤名稱 <code>p</code> 作為選取符)，或許可以用更明確的選取符 (例如 ID 或 class)。以標籤名稱作選取符茲事體大，一旦使用便將影響整個網頁，而且沒有自動恢復預設值的方法。
+</p><p>此外，由於 CSS 具<i>串聯</i>特性，指定選取符時通常越明確越好，以免把不相干的元素都牽扯進來。
+</p>
+<h4 id=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F" name=".E7.9B.B8.E4.BE.9D.E6.A8.A3.E5.BC.8F"> 相依樣式 </h4>
+<p>CSS 並不支援「以另一個樣式規則為基準」的樣式設定法。 (參考 <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer 所寫、關於 CSS 工作小組的說明</a>。) 不過，你可以為某單一元素套上多重樣式，製作出類似效果。
+</p>
+<h4 id=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5" name=".E5.A5.97.E7.94.A8.E5.A4.9A.E9.87.8D.E9.A1.9E.E5.88.A5"> 套用多重類別 </h4>
+<p>你可以在 HTML 元素的 <code>class</code> 屬性裡以空白字元分隔填上多個樣式類別名稱，便能同時套用多重類別。
+</p>
+<pre>&lt;style type="text/css"&gt;
+.firstclass { background: black; color: white; }
+.secondclass { font-weight: bold; }
+&lt;/style&gt;
+
+&lt;div class="firstclass secondclass"&gt;
+... content ...
+... content ...
+... content ...
+&lt;/div&gt;
+</pre>
+<p>若是這些規則中設定了同一種特性值，則會依序以明確性（specificity）、定義位置先後決定顯示方式，與<code>class</code> 屬性中的次序無關。
+</p>
+<h4 id=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F" name=".E7.84.A1.E7.94.A8.E6.A8.A3.E5.BC.8F"> 無用樣式 </h4>
+<p>即使樣式規則已經正確設定完畢，還是可能為瀏覽器所忽略，此時通常是經過語法及優先權法則判斷後的正常現象。
+</p><p>以下是導致樣式被略過的常見情形：
+</p>
+<ul><li> HTML 元素層次問題
+</li><li> 樣式規則重新定義
+</li><li> 特性的簡寫法
+</li><li> 使用 <code>*</code> 選取符
+</li><li> CSS 明確性
+</li></ul>
+<p>你可以使用 <a href="zh_tw/DOM_%e8%a7%80%e5%af%9f%e5%99%a8">DOM 觀察器</a> 的 <i>CSS Style Rules</i> 來檢查上述問題。
+</p><p><b>HTML 元素層次問題</b>
+</p><p>此時 CSS 樣式套用與否與元素的層次大有相關，請留意：套用到子元素的樣式必定會蓋過母元素的樣式，跟明確性或 CSS 規則的優先權無關。
+</p>
+<pre>#section { font-weight: bold; }
+.redtext { font-weight: normal; color: red; }
+
+&lt;div id="section"&gt;
+   粗體、
+   &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
+   又見粗體
+&lt;/div&gt;
+</pre>
+<p>如果你的 HTML 層級錯綜複雜，發生規則意外被忽略的情形時，請檢查元素層級問題。可能有某個子元素套上了不該用的樣式。
+</p><p><b>樣式規則重新定義</b>
+</p><p>在 CSS 樣式表中，先後次序<b>非常</b>重要。如果你定義了某規則後又重新定義一次，則晚定義的才算數。
+</p>
+<pre>#section { font-weight: bold; }
+.redtext { color: red; }
+/* 其他規則 */
+/* 其他規則 */
+/* 其他規則 */
+.redtext { color: green; }
+
+&lt;div id="section"&gt;
+粗體、
+&lt;span class="redtext"&gt;正常紅字？&lt;/span&gt;
+又見粗體
+&lt;/div&gt;
+</pre>
+<p>為避免此類錯誤發生，每個特定選取符請僅定義一次樣式，集中特性一次定義也便於管理些。
+</p><p><br>
+<b>特性的簡寫法</b>
+</p><p>使用簡寫法來定義樣式簡明扼要，是個不錯的方法。你也可以用簡寫法設定某組特性中的部分特性值，但須留意其他沒寫到的部分會自動採用預設值。這表示之前的規則中為某單一特性定義的值可能失效。
+</p>
+<pre>#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.redtext { font: 14px Arial; color: red; }
+
+&lt;div id="section"&gt;
+   採用 Verdana 粗體的 12px 字樣；
+   &lt;span class="redtext"&gt;採用 Arial 正常字體的 14px 紅字；&lt;/span&gt;
+   還是採用 Verdana 粗體的 12px 字樣。
+&lt;/div&gt;
+</pre>
+<p>前一個例子中，套用到不同元素範圍的同族特性是問題所在，但就算特性都寫在同一條規則裡也可能出問題，因為順序<b>真的</b>很重要。
+</p>
+<pre>#section {
+   font-weight: bold;
+   font: 12px Verdana;  /* 有了這行，font-weight 又回到預設的 normal 了 */
+}
+</pre>
+<p><br>
+<b>使用 <code>*</code> 選取符</b>
+</p><p><code>*</code> 選取符表示任何元素皆符合，但使用上應多加小心。
+</p>
+<pre>body * { font-weight: normal; }
+#section { font: 12px Verdana; }
+.boldtext { font-weight: bold; }
+.redtext { color: red; }
+
+&lt;div id="section"&gt;
+   正常、
+   &lt;span class="boldtext"&gt;
+      &lt;span class="redtext"&gt;正常紅字、&lt;/span&gt;
+   &lt;/span&gt;
+   又見正常。
+&lt;/div&gt;
+</pre>
+<p>在此例中，選取符為 <code>body *</code> 的規則會套用到所有 <code>body</code> 內的元素，也包括 <i>redtext</i>，所以原先套用到 <i>boldtext</i> 的 <code>font-weight: bold;</code> 就被覆蓋為 <code>font-weight: normal;</code> 了。
+</p><p><br>
+<b>CSS 明確性</b>
+</p><p>如果某元素會套用好幾條規則，則相衝突的特性就要靠規則的明確性來分高下。行內樣式（放在 HTML 各標籤的 <code>style</code> 屬性中）優先權最高，其次是以 <code>id</code> 做選取符的規則，再其次是以 <code>class</code> 套用的類別，最後則是單純以元素名稱當選取符的規則。
+</p>
+<pre>div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+&lt;div id="orange" class="green" style="color: red;"&gt;是紅的！&lt;/div&gt;
+</pre>
+<p>如果樣式規則的選取符分成好幾段，計算方式就更為複雜一些。需要瞭解完整資訊者，請參考 <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 規格書的 6.4.3 一節</a>。
+</p>
+<h4 id="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F" name="-moz-.2A_.E7.89.B9.E6.80.A7.E6.98.AF.E4.BB.80.E9.BA.BC.E7.8E.A9.E6.84.8F.EF.BC.9F"> -moz-* 特性是什麼玩意？ </h4>
+<p>請見 <a href="zh_tw/Mozilla_%e6%93%b4%e5%85%85%e7%9a%84_CSS">Mozilla 擴充的 CSS</a>。由於這些擴充規格不是 W3C 標準的一部分，因此並不建議使用。
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS" } ) }}
diff --git a/files/zh-tw/web/css/css_animations/index.html b/files/zh-tw/web/css/css_animations/index.html
new file mode 100644
index 0000000000..7c953b2359
--- /dev/null
+++ b/files/zh-tw/web/css/css_animations/index.html
@@ -0,0 +1,136 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+<p>{{CSSRef}}{{SeeCompatTable}}</p>
+
+<p><strong>CSS Animations</strong> is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation")}}</li>
+ <li>{{cssxref("animation-delay")}}</li>
+ <li>{{cssxref("animation-direction")}}</li>
+ <li>{{cssxref("animation-duration")}}</li>
+ <li>{{cssxref("animation-fill-mode")}}</li>
+ <li>{{cssxref("animation-iteration-count")}}</li>
+ <li>{{cssxref("animation-name")}}</li>
+ <li>{{cssxref("animation-play-state")}}</li>
+ <li>{{cssxref("animation-timing-function")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_At-rules">CSS At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@keyframes")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support">Detecting CSS animation support</a></dt>
+ <dd>Describes a technique for detecting if the browser supports CSS animations.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Using CSS animations</a></dt>
+ <dd>Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Animations') }}</td>
+   <td>{{ Spec2('CSS3 Animations') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
+    43.0</td>
+   <td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10</td>
+   <td>12{{property_prefix("-o")}}<br>
+    12.10<sup>[2]</sup></td>
+   <td>4.0{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}} [1]<br>
+    4.0 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.</p>
+
+<p>[2] See the <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">release notes to Opera 12.50</a>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related to CSS Animations, <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS Transitions</a> can trigger animations on user actions.</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_animations/using_css_animations/index.html b/files/zh-tw/web/css/css_animations/using_css_animations/index.html
new file mode 100644
index 0000000000..82acb8ac6e
--- /dev/null
+++ b/files/zh-tw/web/css/css_animations/using_css_animations/index.html
@@ -0,0 +1,334 @@
+---
+title: CSS 動畫
+slug: Web/CSS/CSS_Animations/Using_CSS_animations
+tags:
+  - Advanced
+  - CSS animation
+  - CSS 動畫
+  - Example
+  - Experimental
+  - Guide
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+<p><span class="diff_add">{{SeeCompatTable}}{{CSSRef}}</span></p>
+
+<div>
+<p> CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上，你只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。</p>
+
+<p>  相較於傳統 script-driven 的動畫技術，CSS animations 有三種好處：</p>
+
+<ol>
+ <li>對於不複雜的動畫來說，CSS animation 是好選擇。你甚至不必懂得  JavaScript。</li>
+ <li>在資源消耗上，CSS animation 有優勢，即使在系統負載超過 50% 仍可有效運作。在 JavaScript 上要達到一樣的目的有賴於你寫出品質非常好的  code。事實上，CSS animation 在運作上可以適時的減少 frame 量或以其它技術減少資源消耗。</li>
+ <li>CSS animation 讓瀏覽器來負責動畫的產生過程，如此可以擁有較好的優化。</li>
+</ol>
+
+<h2 id="CSS_animation_設定">CSS animation 設定</h2>
+
+<p>  你可以使用 {{ cssxref("animation") }} property 或其 sub-properties 來創建 CSS 動畫的細節(諸如轉化時間等)。但這並不能決定動畫的外觀，外觀的部份我們將在下面的 {{ anch("使用關鍵影格定義動畫流程") }} 介紹。</p>
+
+<p>  這裡是 {{ cssxref("animation") }} property 的 sub-properties：</p>
+
+<dl>
+ <dt>{{ cssxref("animation-delay") }}</dt>
+ <dd>定義元素讀取完畢到動畫開始的間隔時間。</dd>
+ <dt>{{ cssxref("animation-direction") }}</dt>
+ <dd>定義是否動畫播放完畢後將會反向播放。</dd>
+ <dt>{{ cssxref("animation-duration") }}</dt>
+ <dd>定義動畫完成一次週期的時間。</dd>
+ <dt>{{ cssxref("animation-iteration-count") }}</dt>
+ <dd>定義動畫重複的次數。你可以用 <code>infinite</code> 來讓動畫永遠重複播放。</dd>
+ <dt>{{ cssxref("animation-name") }}</dt>
+ <dd>定義關鍵影格 {{ cssxref("@keyframes") }} 的名字。</dd>
+ <dt>{{ cssxref("animation-play-state") }}</dt>
+ <dd>控制動畫的播放狀態。有 pause 和 running 兩種值，後者為預設值。</dd>
+ <dt>{{ cssxref("animation-timing-function") }}</dt>
+ <dd>定義動畫轉變時時間的加速曲線 (例如 linear)。</dd>
+ <dt>{{ cssxref("animation-fill-mode") }}</dt>
+ <dd>定義元素在動畫播放外(動畫開始前及結束後)的狀態。</dd>
+</dl>
+
+<h2 id="使用關鍵影格定義動畫流程">使用關鍵影格定義動畫流程</h2>
+
+<p>  在你設定了動畫的時間資訊之後，你必須要設定動畫漸變的過程。這可以藉由建造兩個或更多的關鍵影格來達到目的 (使用 {{ cssxref("@keyframes") }} )。關鍵影格描述了該元素在漸變過程中的外觀。</p>
+
+<p>  因為動畫漸變時間已經在 CSS style 中被定義(見上節)，所以關鍵影格使用 {{ cssxref("percentage") }} 來指出他們會在整個漸變流程中的哪個時間點出現。 0% 代表他是整個動畫的起點，而 100% 指出他是整個動畫的結束點。這兩個特殊時間點一定要被定義，如此一來瀏覽器材知道該如何產生你的動畫。也因為他們是如此重要，所以這兩個時間點有特殊的別名： <code>from</code> 和 <code>to。</code></p>
+
+<p>  當然你也可以在動畫轉變過程中增加更多的關鍵影格。</p>
+
+<h2 id="範例">範例</h2>
+
+<div class="note"><strong>注意：</strong> 為了簡潔起見，以下的範例中我們只列出前綴為 <code>-moz-</code> 的部份。當你查看 Live Sample 的原始碼時，可以看到前綴為 <code>-webkit-</code> 的部份。</div>
+
+<h3 id="使文字滑過畫面">使文字滑過畫面</h3>
+
+<p>  這是一個簡單的範例，他展示了 {{ HTMLElement("p") }} element 從畫面右方滑向左方。</p>
+
+<pre class="brush: css">&lt;style type="text/css"&gt;
+  p {
+    -moz-animation-duration: 3s;
+    -moz-animation-name: slidein;
+  }
+
+  @-moz-keyframes slidein {
+    from {
+      margin-left: 100%;
+      width: 300%
+    }
+
+    to {
+      margin-left: 0%;
+      width: 100%;
+    }
+  }
+&lt;/style&gt;
+</pre>
+
+<p>  這裡用 {{ cssxref("animation-duration") }} property 定義 {{ HTMLElement("p") }} element 的變動自開始到結束共花 3 秒。而關鍵影格的名稱由 {{ cssxref("@keyframes") }} 指定 - 叫做 slidein。</p>
+
+<p>  傳統的 {{ HTMLElement("p") }} element 尚有其他性質可供設定，但假設這些性質並不支援 CSS animation，則我們不能期待他們會被瀏覽器顯示。</p>
+
+<p>  這裡的關鍵影格我們定義了兩個 (以 {{ cssxref("@keyframes") }} 定義)，開始 (0%)和結束 (100%)。開始的影格在 from 中，而結束在 to 中。由程式中我們可以看到，整個動畫由最一開始處於最右方且 width 為 300% 轉變為處於最左方且 width 為 100%。如此一來你就可以看到 {{ HTMLElement("p") }} element 由右而左的滑過畫面。</p>
+
+<p>  結束影格描述 width 為 100% 可以確保 {{ HTMLElement("p") }} element 在可視範圍內。</p>
+
+<pre class="brush: html">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("使文字滑過畫面","100%","250")}}</p>
+
+<h3 id="在開頭和結束間加入關鍵影格">在開頭和結束間加入關鍵影格</h3>
+
+<p>  現在我們試著多加入新的關鍵影格。在這個範例中，我們希望做到在文字在移動時字體先變大而後恢復正常。程式碼如下：</p>
+
+<pre class="brush: css">75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+</pre>
+
+<pre class="brush: css hidden">p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>  這段程式碼告訴瀏覽器在開始後過了 75% 的時間後字體增大到三倍，且位置在離左側 25 % 處，此時總寬度為 150%。</p>
+
+<p>{{EmbedLiveSample("在開頭和結束間加入關鍵影格","100%","250")}}</p>
+
+<h3 id="重複播放">重複播放</h3>
+
+<p>  為了達到重複播放的目的，我們使用 {{ cssxref("animation-iteration-count") }} property。讓我們把它設定成 <code>infinite</code> ：</p>
+
+<pre class="brush: css">p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+} </pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("重複播放","100%","250")}}</p>
+
+<h3 id="播放完畢後反向播放">播放完畢後反向播放</h3>
+
+<p>  由上個例子我們知道該如何永久性播放動畫。但這個顯示結果有些突兀，是以我們試著讓他播放完畢後倒帶執行。這需要用到 {{ cssxref("animation-direction") }}，賦予 <code>alternate 的值：</code></p>
+
+<pre class="brush: css">p {
+  -moz-animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-direction: alternate;
+} </pre>
+
+<pre class="brush: css hidden">@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+</pre>
+
+<pre class="brush: html hidden">&lt;p&gt;The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("播放完畢後反向播放","100%","250")}}</p>
+
+<h3 id="使用動畫的事件">使用動畫的事件</h3>
+
+<p>  你可以藉由 animation event 來對 CSS animation 做更進階的控制，這需要用到 {{ domxref("event/AnimationEvent", "AnimationEvent") }} 物件。他可以用來偵測動畫所處的時間點等資訊。每個 event 包含發生的時間以及觸發 event 的動畫名字。</p>
+
+<p>  我們將修改剛剛的範例來展示 animation event 的能力。</p>
+
+<pre class="brush: css">.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}</pre>
+
+<h4 id="設定_animation_event_listeners">設定 animation event listeners</h4>
+
+<p>  我們使用 JavaScript 來監控所有可能的 animation events。下面的 <code>setup()</code> 函式設定我們的 event listeners，並且在文件第一次被載入時執行他：</p>
+
+<pre class="brush: js">function setup() {
+  var e = document.getElementById("watchme");
+  e.addEventListener("animationstart", listener, false);
+  e.addEventListener("animationend", listener, false);
+  e.addEventListener("animationiteration", listener, false);
+
+  var e = document.getElementById("watchme");
+  e.className = "slidein";
+}
+</pre>
+
+<p>  這是非常簡單的程式，你可以從其它相關文件中取得 {{ domxref("element.addEventListener()") }} 的更多細節。setup() 函式所做的最後一件事是設定這個 element 的 class name 為 slidein，此時，我們啟動了這個動畫。</p>
+
+<p>  這麼做的原因是 <code>animationstart</code> event 會在被動畫執行時立刻被觸發，所以我們只好在最後才設定 class name。</p>
+
+<h4 id="接收_events">接收 events</h4>
+
+<p>  這些 events 會被發送到 <code>listener()</code> 函式，如下所示：</p>
+
+<pre class="brush: js">function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+</pre>
+
+<p>  這段程式檢查藉由檢查 {{ domxref("event.type") }} 得知現在收到了哪種 animation event，並且以一個 {{ HTMLElement("ul") }} (unordered list) 形式的記錄下他。</p>
+
+<p>  程式執行結果看起來會是這樣子的：</p>
+
+<ul id="output">
+ <li>Started: elapsed time is 0</li>
+ <li>New loop started at time 3.01200008392334</li>
+ <li>New loop started at time 6.00600004196167</li>
+ <li>Ended: elapsed time is 9.234000205993652</li>
+</ul>
+
+<p>  注意這裡的時間是一個範例，你自己執行可能會取得不一樣的結果(但應該會近似)。此外，在動畫的最後，event 會是 <code>animationend</code> 而非  <code>animationiteration</code> 。</p>
+
+<h4 id="完整的_HTML_程式碼">完整的 HTML 程式碼</h4>
+
+<p>  這裡是完整的 HTML 程式碼：</p>
+
+<pre class="brush: html">&lt;body onload="setup()"&gt;
+  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
+  &lt;p&gt;This example shows how to use CSS animations to make &lt;code&gt;h1&lt;/code&gt; elements
+  move across the page.&lt;/p&gt;
+  &lt;p&gt;In addition, we output some text each time an animation event fires, so you can see them in action.&lt;/p&gt;
+  &lt;ul id="output"&gt;
+  &lt;/ul&gt;
+&lt;/body&gt; </pre>
+
+<p>{{EmbedLiveSample('使用動畫的事件', '600', '300')}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li>{{ domxref("Event/AnimationEvent", "AnimationEvent") }}</li>
+ <li><a href="/en/CSS/CSS_animations/Detecting_CSS_animation_support" title="en/CSS/CSS animations/Detecting CSS animation support">Detecting CSS animation support</a></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_background_and_borders/index.html b/files/zh-tw/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..dcfeef033a
--- /dev/null
+++ b/files/zh-tw/web/css/css_background_and_borders/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Background and Borders
+  - CSS Reference
+  - Overview
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Background and Borders</strong> is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("background")}}</li>
+ <li>{{cssxref("background-attachment")}}</li>
+ <li>{{cssxref("background-clip")}}</li>
+ <li>{{cssxref("background-color")}}</li>
+ <li>{{cssxref("background-image")}}</li>
+ <li>{{cssxref("background-origin")}}</li>
+ <li>{{cssxref("background-position")}}</li>
+ <li>{{cssxref("background-repeat")}}</li>
+ <li>{{cssxref("background-size")}}</li>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("border")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-bottom-left-radius")}}</li>
+ <li>{{cssxref("border-bottom-right-radius")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-collapse")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+ <li>{{cssxref("border-image")}}</li>
+ <li>{{cssxref("border-image-outset")}}</li>
+ <li>{{cssxref("border-image-repeat")}}</li>
+ <li>{{cssxref("border-image-slice")}}</li>
+ <li>{{cssxref("border-image-source")}}</li>
+ <li>{{cssxref("border-image-width")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-radius")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-top-left-radius")}}</li>
+ <li>{{cssxref("border-top-right-radius")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-width")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">Using CSS multiple backgrounds</a></dt>
+ <dd>Explains how to set backgrounds on elements and how they will interact with it.</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Scaling background images</a></dt>
+ <dd>Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'box.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#border')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>1.0</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>4.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
new file mode 100644
index 0000000000..244234b839
--- /dev/null
+++ b/files/zh-tw/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html
@@ -0,0 +1,84 @@
+---
+title: 使用 CSS 多重背景
+slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
+tags:
+  - CSS
+  - CSS Background
+  - Example
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+<p>{{CSSRef}}</p>
+
+<p><span class="seoSummary">藉由 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a> 我們可以對元素使用 <strong>多重背景</strong>。每個設定的背景被一個個分層，第一個背景在最上面，最後一個背景是在最下面一層。</span> 記得只有最後一個背景可以設定 background color。</p>
+
+<p>簡易的表達方式:</p>
+
+<pre class="brush: css">.myclass {
+  background:
+      background 1, //第一層
+      background 2,
+      ...,
+      background N;  //最後一層
+}
+</pre>
+
+<p>可以使用縮寫的方式 {{ cssxref("background") }} 和個別標記的方式設定多重背景，但是部分屬性無法設置多重背景，例如 {{ cssxref("background-color") }}。下面是能設置為多重背景的背景屬性： </p>
+
+<ul>
+ <li>{{ cssxref("background") }}</li>
+ <li>{{ cssxref("background-attachment") }}</li>
+ <li>{{ cssxref("background-clip") }}</li>
+ <li>{{ cssxref("background-image") }}</li>
+ <li>{{ cssxref("background-origin") }}</li>
+ <li>{{ cssxref("background-position") }}</li>
+ <li>{{ cssxref("background-repeat") }}</li>
+ <li>{{ cssxref("background-size") }}</li>
+</ul>
+
+<h2 id="範例">範例</h2>
+
+<p>下面的範例中，重疊三個背景：Firefox logo、<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">線性漸層</a>、一張泡泡的圖片</p>
+
+<pre class="brush: css">.multi_bg_example {
+  background-image   : url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                       url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                       linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat  : no-repeat,
+                       no-repeat,
+                       no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="multi_bg_example"&gt;&lt;/div&gt;</pre>
+
+<pre class="brush: css">.multi_bg_example{
+width:100%;
+height:400px;
+background: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+            url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+            -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
+            linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}</pre>
+</div>
+
+<h2 id="結果">結果</h2>
+
+<p>{{EmbedLiveSample('範例','100%','400')}}</p>
+
+<p>如你所見，Firefox logo（列表第一個選項）在最上面，接著是漸層。每個隨後的子屬性（{{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}）應用相對的背景上。所以第一個 {{ cssxref("background-repeat") }} 的值應用在第一個（最前面）背景。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用 CSS 漸層</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/css_box_model/index.html b/files/zh-tw/web/css/css_box_model/index.html
new file mode 100644
index 0000000000..cb4dd91343
--- /dev/null
+++ b/files/zh-tw/web/css/css_box_model/index.html
@@ -0,0 +1,167 @@
+---
+title: CSS Box Model
+slug: Web/CSS/CSS_Box_Model
+tags:
+  - CSS
+  - CSS Box Model
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Box_Model
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Box Model</strong> is a CSS module that defines the rectangular boxes, including their padding and margin, that are generated for elements and laid out according to the visual formatting model.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<h4 id="Properties_controlling_the_flow_of_content_in_a_box">Properties controlling the flow of content in a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-decoration-break")}}</li>
+ <li>{{cssxref("box-sizing")}}</li>
+ <li>{{cssxref("overflow")}}</li>
+ <li>{{cssxref("overflow-x")}}</li>
+ <li>{{cssxref("overflow-y")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_size_of_a_box">Properties controlling the size of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("height")}}</li>
+ <li>{{cssxref("width")}}</li>
+ <li>{{cssxref("max-height")}}</li>
+ <li>{{cssxref("max-width")}}</li>
+ <li>{{cssxref("min-height")}}</li>
+ <li>{{cssxref("min-width")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_margins_of_a_box">Properties controlling the margins of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("margin")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Properties_controlling_the_paddings_of_a_box">Properties controlling the paddings of a box</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("padding")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-top")}}</li>
+</ul>
+</div>
+
+<h4 id="Other_properties">Other properties</h4>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("box-shadow")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides_and_tools">Guides and tools</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">Introduction to the CSS box model</a></dt>
+ <dd>Explains one of the fundamental concept of CSS, the box model: describes the meaning of the margin, padding, as well as the different areas of a box.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></dt>
+ <dd>In several cases, two adjacent margins are collapsed into one. This article describes when this is happening and how to control it.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator">Box-shadow generator</a></dt>
+ <dd>An interactive tool that allows to visually create shadows and to generate the needed syntax for the {{cssxref("box-shadow")}} property.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</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 Box")}}</td>
+   <td>{{Spec2("CSS3 Box")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "box.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html
new file mode 100644
index 0000000000..be8ea00259
--- /dev/null
+++ b/files/zh-tw/web/css/css_box_model/mastering_margin_collapsing/index.html
@@ -0,0 +1,107 @@
+---
+title: 理解邊界重疊的原因
+slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+<div>{{CSSRef}}</div>
+
+<div>當一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-bottom">下邊界範圍</a> ( margin-bottom ) 和一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-top">上邊界範圍</a> ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為<strong>邊界重疊</strong> ( margin collapsing )。請留意設定了 float 或<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">絕對定位</a>的元件並不會產生邊界重疊。</div>
+
+
+
+<p>有三個標準情況會形成邊界重疊：</p>
+
+<dl>
+ <dt>同一層的相鄰</dt>
+ <dd>兩個相鄰的元素邊界就會發生重疊，除非後者有加上clear-fix。例如：
+ <pre class="brush: html notranslate">&lt;style&gt;
+  p:nth-child(1){
+    margin-bottom: 13px;
+  }
+  p:nth-child(2){
+    margin-top: 87px;
+  }
+&lt;/style&gt;
+
+ &lt;p&gt;下邊界範圍會...&lt;/p&gt;
+ &lt;p&gt;...跟這個元素的上邊界範圍重疊。&lt;/p&gt;
+</pre>
+ </dd>
+ <dd>如果邊界會合併的的話，理所當然會認為上例中的上下兩個元素會合成一個 100px 的邊界範圍。<br>
+ 但其實會發生重疊，而且只會留下最大的邊界範圍，以此例子來說，邊界範圍就是 87px。</dd>
+ <dt></dt>
+ <dt>父元素與第一個/最後一個子元素</dt>
+ <dd>如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix，這些都會隔開子元素和父元素的屬性。<br>
+ 最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。例如：</dd>
+ <dd>
+ <pre class="brush: html notranslate">&lt;style type="text/css"&gt;
+    section    {
+        margin-top: 13px;
+        margin-bottom: 87px;
+    }
+
+    header {
+        margin-top: 87px;
+    }
+
+    footer {
+        margin-bottom: 13px;
+    }
+&lt;/style&gt;
+
+&lt;section&gt;
+    &lt;header&gt;上邊界重疊是 87&lt;/header&gt;
+    &lt;footer&gt;下邊界重疊還是 87 不能再高了&lt;/footer&gt;
+&lt;/section&gt;</pre>
+ </dd>
+ <dt>空的元素</dt>
+ <dd>當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height ) 、最小高度 ( min-height ) 、最大高度 ( max-height ) 、內容設定為 inline 或是加上 clear-fix 的時候。例如：</dd>
+ <dd>
+ <pre class="brush: html notranslate">&lt;style&gt;
+  p {
+    margin: 0px;
+  }
+  div {
+    margin-top: 13px;
+    margin-bottom: 87px;
+  }
+&lt;/style&gt;
+
+&lt;p&gt;下邊界範圍是 87&lt;/p&gt;
+&lt;div&gt;&lt;/div&gt;
+&lt;p&gt;...上邊界範圍也是 87。&lt;/p&gt;
+</pre>
+ </dd>
+</dl>
+
+<p>上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。</p>
+
+<p>比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。舉例來說如果 -13px、8px 和 100px 疊在一起，邊界範圍的計算方法會是 100px - 13px 也就是 87px。</p>
+
+<p>以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算。</p>
+
+<h2 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("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
+ <li>{{css_key_concepts}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_colors/color_picker_tool/index.html b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html
new file mode 100644
index 0000000000..367e58ce23
--- /dev/null
+++ b/files/zh-tw/web/css/css_colors/color_picker_tool/index.html
@@ -0,0 +1,3221 @@
+---
+title: 色彩選擇工具
+slug: Web/CSS/CSS_Colors/Color_picker_tool
+tags:
+  - CSS
+  - Tools
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+<div style="display: none;">
+<h2 id="ColorPicker_Tool" name="ColorPicker_Tool">ColorPicker tool</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">    &lt;div id="container"&gt;
+        &lt;div id="palette" class="block"&gt;
+            &lt;div id="color-palette"&gt;&lt;/div&gt;
+            &lt;div id="color-info"&gt;
+                &lt;div class="title"&gt; CSS Color &lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="picker" class="block"&gt;
+            &lt;div class="ui-color-picker" data-topic="picker" data-mode="HSL"&gt;&lt;/div&gt;
+            &lt;div id="picker-samples" sample-id="master"&gt;&lt;/div&gt;
+            &lt;div id="controls"&gt;
+                &lt;div id="delete"&gt;
+                    &lt;div id="trash-can"&gt;&lt;/div&gt;
+                &lt;/div&gt;
+                &lt;div id="void-sample" class="icon"&gt;&lt;/div&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+
+        &lt;div id="canvas" data-tutorial="drop"&gt;
+            &lt;div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"&gt;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+
+</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] &gt; input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] &gt; input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider &gt; input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch &gt; * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property &gt; * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container &gt; * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls &gt; * {
+	float: left;
+}
+
+#color-palette .controls &gt; *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover &gt; * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+</pre>
+
+<h3 id="JavaScript_Content">JavaScript Content</h3>
+
+<pre class="brush: js">'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value &lt; 0 || value &gt; 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H &gt;= 0 &amp;&amp; H &lt; 1) {	this.setRGBA(C, X, m);	return; }
+		if (H &gt;= 1 &amp;&amp; H &lt; 2) {	this.setRGBA(X, C, m);	return; }
+		if (H &gt;= 2 &amp;&amp; H &lt; 3) {	this.setRGBA(m, C, X);	return; }
+		if (H &gt;= 3 &amp;&amp; H &lt; 4) {	this.setRGBA(m, X, C);	return; }
+		if (H &gt;= 4 &amp;&amp; H &lt; 5) {	this.setRGBA(X, m, C);	return; }
+		if (H &gt;= 5 &amp;&amp; H &lt; 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue &lt; 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r &lt; 16) r = '0' + r;
+		if (this.g &lt; 16) g = '0' + g;
+		if (this.b &lt; 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x &gt; size) x = size;
+		if (y &gt; size) y = size;
+		if (x &lt; 0) x = 0;
+		if (y &lt; 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		// TODO 360 =&gt; 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x &lt; 0) x = 0;
+		if (x &gt; width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' &amp;&amp; isNaN(value) === false &amp;&amp;
+			value &gt;= 0 &amp;&amp; value &lt;= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' &amp;&amp; mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision &gt;= 0 ? precision : 0;
+		this.step = step &lt; 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity &gt; 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value &gt; slider.max) value = slider.max;
+		if (value &lt; slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value &gt; 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i &lt; subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i &lt; size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action &gt;= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action &lt;= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue &lt; 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha &lt;= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i &lt; size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i &lt; 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i &lt; 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i &lt; nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined &amp;&amp; samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i&lt;16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+</pre>
+</div>
+
+
+<p>{{CSSRef}}</p>
+
+<p>這是個可以讓人新增、調整和測試網頁顏色的工具。藉由這個工具讓人可以輕鬆將顏色轉換成各種 CSS 支援的格式，包含：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Staturation/Lightness）。在 RGB（rgba）和 HSL（hsla）格式也支援控制阿爾法通道（alpha channel）</p>
+
+<p>隨著調整每個顏色都會顯示成三種 CSS 的標準格式；此外，基於目前選擇的顏色，一個調色板 HSL 和 HSV、還有 alpha, 被創建。滴管風格的色彩選擇器對話框可以在 HSL 或 HSV 格式中切換。</p>
+
+<p>{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}</p>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_colors/index.html b/files/zh-tw/web/css/css_colors/index.html
new file mode 100644
index 0000000000..607d1790af
--- /dev/null
+++ b/files/zh-tw/web/css/css_colors/index.html
@@ -0,0 +1,119 @@
+---
+title: CSS Colors
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Colors
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Color
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Colors</strong> is a module of CSS that deals with colors, color types and transparency.</p>
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="Properties">Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("color")}}</li>
+ <li>{{cssxref("opacity")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_Data_Types">CSS Data Types</h3>
+
+<p>{{cssxref("&lt;color&gt;")}}</p>
+
+<h2 id="Guides">Guides</h2>
+
+<p><em>None.</em></p>
+
+<h2 id="Specifications">Specifications</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 Colors')}}</td>
+   <td>{{Spec2('CSS3 Colors')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'colors.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>In CSS, gradients aren't colors but <a href="/en-US/docs/Web/CSS/CSS_Images">images</a>.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_flexible_box_layout/index.html b/files/zh-tw/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..f26fcfb2e8
--- /dev/null
+++ b/files/zh-tw/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,118 @@
+---
+title: CSS 彈性盒子排版
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS 彈性盒子排版</strong>（CSS Flexible Box Layout）是 <a href="/zh-TW/docs/Web/CSS">CSS</a> 的模組。它為了最佳化 CSS 盒子模型的使用者介面設計而來、並把項目都配置在一個維度之內。在彈性盒子排版中，彈性容器的子項目們可以伸展到任何方向、並讓他們的尺寸更加「彈性」、或者持續增大，以填補未使用的空間，抑或縮小，以避免父元素溢出。子項目橫向或縱向對齊都很容易操作。</p>
+
+<h2 id="基本範例">基本範例</h2>
+
+<p>下例的容器已經設為 <code>display: flex</code>、意味著三個子元素變成了彈性項目（flex item）。<code>justify-content</code> 值也設成了 <code>space-between</code> 以便將項目均勻地分佈在主軸上。每個物品之間放置相等數量的空間，左右項目與彈性容器（flex container）的邊緣齊平。你可能也發現到各項目在切軸（cross axis）上伸展。那是因為 <code>align-items</code> 的值是 <code>stretch</code>。項目伸展為彈性容器的高度、令它們看起来都如同最高的項目一般高。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h3 id="對齊屬性">對齊屬性</h3>
+
+<p>The properties <code>align-content</code>, <code>align-self</code>, <code>align-items</code> and <code>justify-content</code> initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.</p>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("place-content")}}</li>
+ <li>{{cssxref("place-items")}}</li>
+ <li>{{cssxref("row-gap")}}</li>
+ <li>{{cssxref("column-gap")}}</li>
+ <li>{{cssxref("gap")}}</li>
+</ul>
+</div>
+
+<h3 id="短詞">短詞</h3>
+
+<div class="index">
+<ul>
+ <li>{{Glossary("Flexbox", "", 1)}}</li>
+ <li>{{Glossary("Flex Container", "", 1)}}</li>
+ <li>{{Glossary("Flex Item", "", 1)}}</li>
+ <li>{{Glossary("Main Axis", "", 1)}}</li>
+ <li>{{Glossary("Cross Axis", "", 1)}}</li>
+ <li>{{Glossary("Flex", "", 1)}}</li>
+</ul>
+</div>
+
+<h2 id="教學">教學</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">彈性盒子的基本概念</a></dt>
+ <dd>彈性盒子的概述</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">彈性盒子與其他排版的關係</a></dt>
+ <dd>彈性盒子如何與其他排版和 CSS 規範相關連</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">在彈性容器內對齊</a></dt>
+ <dd>彈性盒子的 Box Alignment 屬性如何做動。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">給彈性項目排序</a></dt>
+ <dd>解釋改變彈性項目順序和方向的不同方法，並講到潛在的問題。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">控制彈性項目與主軸的比例</a></dt>
+ <dd>將解釋 flex-grow、flex-shrink、flex-basis 屬性。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">掌握彈性項目 wrapping</a></dt>
+ <dd>如何使用多行建立彈性容器，並控制這些行中項目的顯示。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">彈性盒子的典型用例</a></dt>
+ <dd>彈性盒子常見的設計範式。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">彈性盒子的向下相容</a></dt>
+ <dd>彈性盒子的瀏覽器相容性、互操作性問題、支持舊版瀏覽器和規範的版本</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參見">參見</h2>
+
+<dl>
+ <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
+ <dd>a community-curated list of flexbox browser bugs and workarounds</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt>
+ <dd>This article provides a set of mixins for those who want to create cross-browser flexbox experiences that even work in older browser that don't support the modern flexbox syntax</dd>
+</dl>
diff --git a/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..19ca6226ec
--- /dev/null
+++ b/files/zh-tw/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,382 @@
+---
+title: CSS彈性盒子用法
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+tags:
+  - '#RWD'
+  - CSS
+  - Web
+  - 例子
+  - 先进的
+  - 入门
+  - 灵活
+  - 盒
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>彈性盒子</strong>，又稱<strong>flexbox</strong>，是為了適應不同螢幕尺寸和顯示設備而生的<a href="/zh-TW/docs/Web/CSS/Layout_mode">佈局模式</a>。</span>針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，彈性容器的邊緣也不會與內容的邊緣重疊。</p>
+
+<p>多數設計師會發現 flexbox 用起來比 box 簡單得多。像是不多注意 <code>div</code> 的話，它就會經常違反設計師意願地，跑到頁頂去──令 footer 附著在頁底，也因此變得很棘手。flexbox 的寬高能改變以適應顯示空間，將較低的元件固定住。Flexbox 邏輯也能讓你確實令 <code>div</code> 壓在頁面的右方或底部。Flexbox 元素的顯示順序，與原始碼的顯示順序相互獨立。</p>
+
+<p>一些時髦的佈局，也能因而透過更簡潔的程式碼完成。這種有意的獨立性只影響視覺渲染，基於 HTML 原始碼的語意順序及瀏覽不會受到影響。</p>
+
+<div class="note"><strong>注：</strong>儘管 <a href="http://www.w3.org/TR/css3-flexbox/">CSS 彈性盒子佈局規範</a>還處於最終徵求意見稿（Last Call Working Draft）階段（參見<a href="http://dev.w3.org/csswg/css-flexbox/">最新編輯草案</a>）、也不是所有瀏覽器都實做彈性盒子的所有功能。但這麼說好了，現在主流的瀏覽器，都對 flexbox 有著良好的支持。請參見<a href="/zh-TW/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">相容性表格</a>的具體屬性，以獲取最新的相容狀態。</div>
+
+<h2 id="彈性盒子的概念">彈性盒子的概念</h2>
+
+<p>Flex 排版的大致定義，是能更改該項目的長與（或）高，以便貼合任何顯示設備的空間。Flex container 能針對該元件擴張以便填補可用的空間、或收縮以便阻止空間溢出。</p>
+
+<p>塊狀佈局（Block layout）以垂直方向為準、行內佈局（Inline layout）以水平方向為準、而彈性佈局（Flexbox layout）則同時允許這兩種。塊狀佈局雖適於頁面顯示，但在程式元件（application component）需要在用戶代理（user agent）變更、手機從垂直方向翻轉到水平方向……等變更定位、大小、拉伸、收縮的情形下，這種佈局就很難用了。彈性盒子佈局長於小規模佈局、而剛剛流行的格線佈局（Grid layout）則長於大規模佈局。二者皆為 CSS 工作小組為在不同用戶代理、書寫模式、和其他要求下的 Web 應用程式，提供良好互通性的一部分。</p>
+
+<h2 id="彈性盒子的字彙">彈性盒子的字彙</h2>
+
+<p>在彈性盒子的世界，我們不會稱水平（inline）或垂直（block），而是主軸（main axis）與切軸（cross axis）。如果 <code>flex-direction</code> 是 <code>column</code>，主軸就會充當垂直、而切軸則充當水平。請參考下面的圖，它展示了一個 <code>flex-direction</code> 是 <code>row</code> 的彈性容器，意味著該彈性項目會基於主軸，作水平排列。</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>彈性容器（Flex container）</dt>
+ <dd>包住彈性項目（Flex item）的父元素。在 {{Cssxref("display")}} 屬性用上 <code>flex</code> 或 <code>inline-flex</code> 值的，就是彈性容器。</dd>
+ <dt>彈性項目（Flex item）</dt>
+ <dd>
+ <p>所有彈性容器的子元素都會變成彈性項目。直接包含在彈性容器的文字，會被包裝成匿名的 Flex 項目。</p>
+ </dd>
+ <dt>軸（Axes）</dt>
+ <dd>
+ <p>所有彈性盒子布局都有兩個軸。<strong>主軸（main axis）</strong>是跟隨著彈性項目順序的軸、而<strong>切軸(cross axis)</strong>是垂直於主軸的軸。</p>
+
+ <ul>
+  <li><code><a href="/zh-TW/docs/Web/CSS/flex-direction">flex-direction</a></code> 屬性啟用主軸。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/justify-content"><code>justify-content</code></a> 屬性定義目前彈性項目的主軸如何擺放。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/align-items"><code>align-items</code></a> 屬性定義目前彈性項目的切軸如何擺放。</li>
+  <li><a href="/zh-TW/docs/Web/CSS/align-self"><code>align-self</code></a> 屬性定義目前單一彈性項目如何對齊。這個設定會覆蓋 <code>align-items</code> 的預設值。</li>
+ </ul>
+ </dd>
+ <dt>方向（Directions）</dt>
+ <dd>
+ <p>彈性容器的 <strong>main start</strong>/<strong>main end</strong> 與 <strong>cross start</strong>/<strong>cross end</strong> sides 描述了彈性項目流的起點與終點。它們跟隨著由 <code>writing-mode</code> 所建立的向量中，彈性容器的主軸與切軸排列（左至右或右至左……等等）。</p>
+
+ <ul>
+  <li><a href="/zh-TW/docs/Web/CSS/order"><code>order</code></a> assigns elements to ordinal groups and determines which elements appear first.</li>
+  <li><a href="/zh-TW/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> 屬性是 <a href="/zh-TW/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> 與 <a href="/zh-TW/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> 屬性的簡寫，描述了彈性項目的整體布局。</li>
+ </ul>
+ </dd>
+ <dt>Lines</dt>
+ <dd>
+ <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p>
+ </dd>
+ <dt>Dimensions</dt>
+ <dd>
+ <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p>
+
+ <ul>
+  <li>The <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> and <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> properties initial value is 0.</li>
+  <li>The <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> property shorthands the <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, and <a href="/en-US/docs/Web/CSS/flex-basis"><code>flex-basis</code></a> properties to establish the flexibility of the flex items.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="設計一個彈性盒子">設計一個彈性盒子</h2>
+
+<p>要設計基於這種風格的 CSS 元素，請把 <a href="/zh-TW/docs/Web/CSS/display">display</a> 屬性設為：</p>
+
+<pre class="brush: css">display: flex;</pre>
+
+<p>或：</p>
+
+<pre class="brush: css">display: inline-flex;</pre>
+
+<p>這樣一來，元素就會變成彈性容器，而它的子元素們就會變成彈性項目。<code>flex</code> 值會讓彈性容器變成塊級元素（block-level element）、<code>inline-flex</code> 則會讓彈性容器成為單一的行內元素（atomic inline-level element）。</p>
+
+<div class="note"><strong>注意：</strong>如果需要支援較舊的瀏覽器，請把廠商前輟標記（vendor prefix tag）寫在 <code>display</code> 屬性（property），而不是屬性值（attribute）。例如：<code>display: -webkit-flex</code>。</div>
+
+<h2 id="彈性項目需要留心……">彈性項目需要留心……</h2>
+
+<p>Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated <code>display: none</code>.</p>
+
+<p>Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.</p>
+
+<p>The margins of adjacent flex items do not collapse. Using <code>auto</code> margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items. See <a href="https://drafts.csswg.org/css-flexbox-1/#auto-margins">Aligning with 'auto' margins</a> in the W3C CSS Flexible Box Layout Module specification for more details.</p>
+
+<p>Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>
+
+<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>
+
+<h2 id="彈性盒子的屬性">彈性盒子的屬性</h2>
+
+<h3 id="不對彈性盒子生效的屬性">不對彈性盒子生效的屬性</h3>
+
+<p>由於彈性盒子使用不同的排版演算法，所以有些屬性不太適合用在彈性容器內：</p>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple column 模組</a>的 <code>column-*</code> 屬性對彈性項目無效。</li>
+ <li>{{cssxref("clear")}} 對彈性項目無效。</li>
+ <li>{{cssxref("float")}} causes the <code>display</code> property of the element to compute to <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} 對已對齊的彈性項目無效。</li>
+</ul>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="基本彈性排版示例">基本彈性排版示例</h3>
+
+<p>這個基本彈性將展示如何把「彈性化」引至某個元素、並在彈性狀態下相鄰該元素的表現。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;style&gt;
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex &gt; div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex &gt; div:nth-child(1){ background: #009246; }
+    .flex &gt; div:nth-child(2){ background: #F1F2F1; }
+    .flex &gt; div:nth-child(3){ background: #CE2B37; }
+
+    .flex &gt; div:hover {
+        width: 200px;
+    }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+    &lt;div class="flex"&gt;
+      &lt;div&gt;uno&lt;/div&gt;
+      &lt;div&gt;due&lt;/div&gt;
+      &lt;div&gt;tre&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="聖杯排版示例">聖杯排版示例</h3>
+
+<p>本示例將示範彈性盒子在不同的解析度之下，如何提供動態變更的能力。下圖將說明轉換。</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>這裡展示了貼合了瀏覽器視窗的排版，必須為智慧型手機視窗最佳化的情況。不僅尺寸要縮減，呈現順序也要改變。彈性盒子把這件事變得相當簡單。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main &gt; article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main &gt; nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main &gt; aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main &gt; article, #main &gt; nav, #main &gt; aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main &gt; nav, #main &gt; aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;header&gt;header&lt;/header&gt;
+    &lt;div id='main'&gt;
+      &lt;article&gt;article&lt;/article&gt;
+      &lt;nav&gt;nav&lt;/nav&gt;
+      &lt;aside&gt;aside&lt;/aside&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="遊樂場">遊樂場</h2>
+
+<p>以下提供一些與彈性盒子相關的網站讓你親手操作：</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+ <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
+</ul>
+
+<h2 id="要注意的事情">要注意的事情</h2>
+
+<p>有時候配置 Flex item 的演算法會有點難以理解。因此，在設計 Flexible box 時有一些指引，能讓你避免負面意義上的驚嘆。</p>
+
+<p>Flexible box 通常會盡量貼合 <a href="https://developer.mozilla.org/zh-TW/docs/CSS/writing-mode">writing mode</a> 的配置，這意味著 <strong>main start</strong> 與 <strong>main end</strong> 會基於 <strong>start</strong> 與 <strong>end</strong> 的位置來配置。</p>
+
+<p><strong>cross start</strong> 與 <strong>cross end</strong> 依賴 <strong>start</strong> 或 <strong>before</strong> 的定義的位置，其依賴 <a href="/zh-TW//docs/Web/CSS/direction"><code>direction</code> 的值</a>。</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari up to version 6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">The Flexbugs project</a> for information on bugs in browsers' implementations of flexbox.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
new file mode 100644
index 0000000000..2c6c9685cc
--- /dev/null
+++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html
@@ -0,0 +1,715 @@
+---
+title: 格線佈局的基本概念
+slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
+---
+<p><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線佈局</a>介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。</p>
+
+<h2 id="什麽是格線？">什麽是格線？</h2>
+
+<p>格線是一組水平線和垂直線的交叉集合（intersecting set）：一個定義為行（row），另一個定義為列（column）。你可以讓各元素依照行列的規則放到各格線上。CSS 格線佈局具有以下特點：</p>
+
+<h3 id="固定和靈活的軌道尺寸">固定和靈活的軌道尺寸</h3>
+
+<p>你可以給各格線指定一個固定的軌道大小，例如像素（pixel）。這樣就能把格線設為指定的像素，以貼近你期望的排版。也可以創建一個使用百分比、或是新的 <code>fr</code> 單位之格線。<code>fr</code> 單位就是為了格線布局而生。</p>
+
+<h3 id="單元佈置">單元佈置</h3>
+
+<p>你可以在格線使用行號、名字、目標區域，讓各單元放到精確的位置。格線也有控制非明式（explicit）單元的布局演算法。</p>
+
+<h3 id="Creation_of_additional_tracks_to_hold_content">Creation of additional tracks to hold content</h3>
+
+<p>你可以按照需求，定義明式格線、也可以處理沒有指定的格線、還可以增加額外的行（row）與列（column）。如果需要「盡可能地放進容器容得了的列」之類的也辦得到。</p>
+
+<h3 id="控制對齊">控制對齊</h3>
+
+<p>格線也包含了依序對齊的功能，以便控制各格線內的各單元、還有整個格線要如何對齊。</p>
+
+<h3 id="Control_of_overlapping_content">Control of overlapping content</h3>
+
+<p>數個單位也能被放進 grid cell、或是區域的一部分相互重疊。我們可以透過 {{cssxref("z-index")}} 控制該分層。</p>
+
+<p>格線是個強大的規範、它在與諸如<a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout">彈性盒子</a>之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立<strong>格線容器</strong>（grid container）開始。</p>
+
+<h2 id="格線容器">格線容器</h2>
+
+<p>我們會宣告 <code>display: grid</code> 或 <code>display: inline-grid</code> 來給一個元素建立格線容器（<em>grid container</em>）。宣告以後，該元素的所有<em>直接子元素</em>會變成<em>格線單位</em>（grid item）</p>
+
+<p>本例中，我有個稱作 wrapper class 的 div，裡面有五個元素。</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>接著我讓 <code>.wrapper</code> 變成格線容器（grid container）。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_Grid_container', '200', '330') }}</p>
+
+<p>在它下面的直接子元素，現在都是格線單元了。從網路瀏覽器來看，各單元變成格線的前後，似乎沒什麼不同，因為目前格線只有建立一個格線列，來放所有的格線單元。這時候，你會發現<a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">格線檢測器</a>相當好用。如果在 Firefox 檢查這個示例的格線，你會發現在 <code>grid</code> 值旁邊，有一個小圖標。點選這個小圖標，瀏覽器視窗的元素，就會被一個圖層覆蓋。</p>
+
+<p><img alt="Using the Grid Highlighter in DevTools to view a grid" src="https://mdn.mozillademos.org/files/14631/1-grid-inspector.png" style="height: 753px; width: 900px;"></p>
+
+<p>在理解並與 CSS 格線共事時，這個工具能幫你視覺化理解，格線到底怎麼做動的。</p>
+
+<p>如果要開始把做得更像格線，我們還需要多寫個 column track。</p>
+
+<h2 id="格線軌道（Grid_Track）">格線軌道（Grid Track）</h2>
+
+<p>我們在格線裡透過 {{cssxref("grid-template-columns")}} 與 {{cssxref("grid-template-rows")}} 屬性定義了行與列。它們也定義了格線軌道。<em>格線軌道</em>是在格線的兩個欄位之間的空隙。下圖就會看到軌道的高亮：就在格線裡面的第一行。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14637/1_Grid_Track.png" style="height: 261px; width: 392px;"></p>
+
+<p>I can add to our earlier example by adding the <code>grid-template-columns</code> property, then defining the size of the column tracks.</p>
+
+<p>I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.</p>
+
+<div id="grid_first">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('grid_first', '610', '200') }}</p>
+</div>
+
+<h3 id="fr_單位">fr 單位</h3>
+
+<p>格線軌道可以使用任何單位定義，不過格線引入了額外的單位，以助於建立有彈性的格線軌道。新的單位 <code>fr</code> 代表格線容器內，可用空間的分塊（fraction）。接下來的格線定義，會建立三個同等、且能依照可用空間縮放的長度軌道。</p>
+
+<div id="fr_unit_ls">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('fr_unit_ls', '220', '180') }}</p>
+</div>
+
+<p>接著下例將創建有一個 <code>2fr</code> 的軌道，接著還有兩個 <code>1fr</code> 的軌道。可用空間會因此被分為四塊：其中兩塊給第一個軌道、剩下兩塊給兩個軌道各一個。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+</pre>
+
+<p>最後，我們會把分塊與絕對大小做結合。第一個軌道有 500 像素，這個固定的寬度，會因此從可用空間先割一塊出去。接下來的空間會被劃分為三塊，並按比例指派給剩下的彈性軌道。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+</pre>
+
+<h3 id="Track_listings_with_repeat_notation">Track listings with <code>repeat()</code> notation</h3>
+
+<p>含有許多軌道的格線能用 <code>repeat()</code> 標記，以使軌道透過迴圈表列數次。以下面為例：</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+</pre>
+
+<p>這可以寫成：</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<p>重複標記是軌道表列一部分。下例中，我們建立了有 20 像素的軌道，接著重複 <code>1fr</code> 軌道六次，最後以 20 像素的軌道做結。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+</pre>
+
+<p>重複標記使用軌道表列，因此可以用它來建立重複的模式。下個例子的格線，會包含十個軌道：也就是 <code>1fr</code> 後面有 <code>2fr</code> 的軌道，並重複五次。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+</pre>
+
+<h3 id="明式與暗式格線">明式與暗式格線</h3>
+
+<p>在建立上例格線的時候，我們用 {{cssxref("grid-template-columns")}} 屬性指定了列軌道，但格線自己也建立了一行。相較於使用 {{cssxref("grid-template-columns")}} 或 {{cssxref("grid-template-rows")}} 屬性的明式格線（explicit grid），這幾行就屬於暗式格線（implicit grid）。</p>
+
+<p>你也能在暗式格線內透過 {{cssxref("grid-auto-rows")}} 與 {{cssxref("grid-auto-columns")}} 屬性，給軌道定義一套大小。</p>
+
+<p>下例將使用 <code>grid-auto-rows</code> 以確保由暗式格線建立的軌道，高度都會是 200 像素。</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('The_implicit_and_explicit_grid', '210', '410') }}</p>
+
+<h3 id="軌道縮放與_minmax">軌道縮放與 <code>minmax()</code></h3>
+
+<p>在設定顯式格線或希望自動給軌道一個最小尺寸，但也要確保它們擴展以適應任何添加的內容——像是希望某行不能小於 100 像素以避免跑版，但如果內容高度超過 300 像素，該行就要拉到那麼高。</p>
+
+<p>針對這個情境，格線提供了 {{cssxref("minmax", "minmax()")}} 函式。本例中，我針對 {{cssxref("grid-auto-rows")}} 指定了 <code>minmax()</code> 的數值。它會指定高度最小要 100 像素，最大則是 <code>auto</code>。<code>auto</code> 意味著大小會檢查內容大小，並適配這一行 cell 內最高項目的高度。</p>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+
+.wrapper {
+  border: 2px solid #f76707;
+  border-radius: 5px;
+  background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+  border: 2px solid #ffa94d;
+  border-radius: 5px;
+  background-color: #ffd8a8;
+  padding: 1em;
+  color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div&gt;One&lt;/div&gt;
+  &lt;div&gt;Two
+  &lt;p&gt;I have some more content in.&lt;/p&gt;
+  &lt;p&gt;This makes me taller than 100 pixels.&lt;/p&gt;
+&lt;/div&gt;
+  &lt;div&gt;Three&lt;/div&gt;
+  &lt;div&gt;Four&lt;/div&gt;
+  &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Track_sizing_and_minmax()', '230', '490') }}</p>
+
+<h2 id="Grid_Lines">Grid Lines</h2>
+
+<p>It should be noted that when we define a grid we define the grid tracks, not the lines. Grid then gives us numbered lines to use when positioning items. In our three column, two row grid we have four column lines.</p>
+
+<p><img alt="Diagram showing numbered grid lines." src="https://mdn.mozillademos.org/files/14761/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
+
+<p>Lines are numbered according to the writing mode of the document. In a left-to-right language, line 1 is on the left-hand side of the grid. In a right-to-left language, it is on the right-hand side of the grid. Lines can also be named, and we will look at how to do this in a later guide in this series.</p>
+
+<h3 id="Positioning_items_against_lines">Positioning items against lines</h3>
+
+<p>We will be exploring line based placement in full detail in a later article, the following example demonstrates doing this in a simple way. When placing an item we target the line – rather than the track.</p>
+
+<p>In the following example I am placing the first two items on our three column track grid, using the {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} properties. Working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far right line on the grid. It begins at row line 1 and ends at row line 3, therefore spanning two row tracks.</p>
+
+<p>The second item starts on grid column line 1, and spans one track. This is the default so I do not need to specify the end line. It also spans two row tracks from row line 3 to row line 5. The other items will place themselves into empty spaces on the grid.</p>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box1"&gt;One&lt;/div&gt;
+   &lt;div class="box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Positioning_items_against_lines', '220', '410') }}</p>
+
+<p>Don't forget that you can use the <a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Inspector</a> in Firefox Developer Tools to see how the items are positioned against the lines of the grid.</p>
+
+<h2 id="Grid_Cells">Grid Cells</h2>
+
+<p>A <em>grid cell</em> is the smallest unit on a grid, conceptually it is like a table cell. As we saw in our earlier examples, once a grid is defined on a parent the child items will lay themselves out once in each cell of the defined grid. In the below image I have highlighted the first cell of the grid.</p>
+
+<p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p>
+
+<h2 id="Grid_areas">Grid areas</h2>
+
+<p>Items can span one or more cells both by row or by column, and this creates a <em>grid area</em>. Grid areas have to be rectangular – it isn’t possible to create an L-shaped area for example. The highlighted grid area spans two row and two column tracks.</p>
+
+<p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p>
+
+<h2 id="Gutters">Gutters</h2>
+
+<p><em>Gutters</em> or <em>alleys</em> between grid cells can be created using the {{cssxref("grid-column-gap")}} and {{cssxref("grid-row-gap")}} properties, or the shorthand {{cssxref("grid-gap")}}. In the below example I am creating a 10-pixel gap between columns and a <code>1em</code> gap between rows.</p>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Gutters') }}</p>
+
+<p>Any space used by gaps will be accounted for before space is assigned to flexible length <code>fr</code> tracks, and gaps act for sizing purposes like a regular grid track, however you cannot place anything into a gap. In terms of line-based positioning, the gap acts like a fat line.</p>
+
+<h2 id="Nesting_grids">Nesting grids</h2>
+
+<p>A grid item can become a grid container. In the following example I have the three-column grid created earlier, with our two positioned items. In this case the first item has some sub-items. As these items are not direct children of the grid they do not participate in grid layout and so display in normal document flow.</p>
+
+<div id="nesting">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;
+       &lt;div class="nested"&gt;a&lt;/div&gt;
+       &lt;div class="nested"&gt;b&lt;/div&gt;
+        &lt;div class="nested"&gt;c&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+    &lt;div class="box box3"&gt;Three&lt;/div&gt;
+    &lt;div class="box box4"&gt;Four&lt;/div&gt;
+    &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p>
+
+<p>If I set <code>box1</code> to <code>display: grid</code> I can give it a track definition and it too will become a grid, the items then lay out on this new grid.</p>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('nesting', '600', '410') }}</p>
+
+<p>In this case the nested grid has no relationship to the parent. As you can see in the example it has not inherited the {{cssxref("grid-gap")}} of the parent and the lines in the nested grid do not align to the lines in the parent grid.</p>
+
+<h3 id="Subgrid">Subgrid</h3>
+
+<p>In the level 1 grid specification there is a feature called <em>subgrid</em> which would let us create nested grids that use the track definition of the parent grid.</p>
+
+<div class="note">
+<p>Subgrids are not yet implemented in any browsers, and the specification is subject to change.</p>
+</div>
+
+<p>In the current specification, we would edit the above nested grid example to use <code>display: subgrid</code> rather than <code>display: grid</code>, then remove the track definition. The nested grid will use the parent grid tracks to lay out items.</p>
+
+<p>It should be noted that the nested grid is in both dimensions—rows and columns. There is no concept of the implicit grid working with subgrids. This means you need to ensure that the parent grid has enough row and column tracks for all the subitems.</p>
+
+<pre class="brush: css">.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+</pre>
+
+<h2 id="Layering_items_with_z-index">Layering items with <code>z-index</code></h2>
+
+<p>Grid items can occupy the same cell. If we return to our example with items positioned by line number, we can change this to make two items overlap.</p>
+
+<div id="l_ex">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+   &lt;div class="box box1"&gt;One&lt;/div&gt;
+   &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+</div>
+
+<p>{{ EmbedLiveSample('l_ex', '210', '410') }}</p>
+
+<p>The item <code>box2</code> is now overlapping <code>box1</code>, it displays on top as it comes later in the source order.</p>
+
+<h3 id="Controlling_the_order">Controlling the order</h3>
+
+<p>We can control the order in which items stack up by using the <code>z-index</code> property - just as with positioned items. If we give <code>box2</code> a lower <code>z-index</code> than <code>box1</code> it will display below <code>box1</code> in the stack.</p>
+
+<pre class="brush: css">.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+    &lt;div class="box box1"&gt;One&lt;/div&gt;
+    &lt;div class="box box2"&gt;Two&lt;/div&gt;
+   &lt;div class="box box3"&gt;Three&lt;/div&gt;
+   &lt;div class="box box4"&gt;Four&lt;/div&gt;
+   &lt;div class="box box5"&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+.box {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #ffd8a8;
+    padding: 1em;
+    color: #d9480f;
+}
+.nested {
+    border: 2px solid #ffec99;
+    border-radius: 5px;
+    background-color: #fff9db;
+    padding: 1em;
+}
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Controlling_the_order', '210', '410') }}</p>
+
+<h2 id="下一步">下一步</h2>
+
+<p>In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto <a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</p>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Glossary/Grid">Grid</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_Axis">Grid Axis</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..0fd5616848
--- /dev/null
+++ b/files/zh-tw/web/css/css_grid_layout/index.html
@@ -0,0 +1,252 @@
+---
+title: CSS格線布局
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - 參考
+  - 布局
+  - 柵格
+  - 示列
+  - 網格布局
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+<p><strong>CSS 格線佈局</strong>長於把頁面的主要區域分離、或是在 HTML 原生語法構建的區域間，定義大小、位置、層次等方面的關聯。</p>
+
+<p>格線佈局使作者能夠對齊元素為行和列，就像表格一樣，。然而，格線佈局可以更輕易的達成比一般表格更多元化的排版。例如，一個網格容器的子元素可以定位自己和層重疊，類似於CSS定位元素。</p>
+
+<h2 id="Basic_Example" name="Basic_Example">基本示例</h2>
+
+<p>以下示例展示了一個三列軌道格線，其中創建的行數最小為 100 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。</p>
+
+<div id="example">
+<div class="hidden">
+<pre class="brush: css">* {box-sizing: border-box;}
+.wrapper {
+  max-width: 940px;
+  margin: 0 auto;
+}
+
+.wrapper &gt; div {
+  border: 2px solid rgb(233,171,88);
+  border-radius: 5px;
+  background-color: rgba(233,171,88,.5);
+  padding: 1em;
+  color: #d9480f;
+}</pre>
+</div>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div class="wrapper"&gt;
+  &lt;div class="one"&gt;One&lt;/div&gt;
+  &lt;div class="two"&gt;Two&lt;/div&gt;
+  &lt;div class="three"&gt;Three&lt;/div&gt;
+  &lt;div class="four"&gt;Four&lt;/div&gt;
+  &lt;div class="five"&gt;Five&lt;/div&gt;
+  &lt;div class="six"&gt;Six&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-row: 2 / 5;
+  grid-column: 1;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
+</div>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("grid-template-columns")}}</li>
+ <li>{{cssxref("grid-template-rows")}}</li>
+ <li>{{cssxref("grid-template-areas")}}</li>
+ <li>{{cssxref("grid-template")}}</li>
+ <li>{{cssxref("grid-auto-columns")}}</li>
+ <li>{{cssxref("grid-auto-rows")}}</li>
+ <li>{{cssxref("grid-auto-flow")}}</li>
+ <li>{{cssxref("grid")}}</li>
+ <li>{{cssxref("grid-row-start")}}</li>
+ <li>{{cssxref("grid-column-start")}}</li>
+ <li>{{cssxref("grid-row-end")}}</li>
+ <li>{{cssxref("grid-column-end")}}</li>
+ <li>{{cssxref("grid-row")}}</li>
+ <li>{{cssxref("grid-column")}}</li>
+ <li>{{cssxref("grid-area")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_函式">CSS 函式</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("repeat", "repeat()")}}</li>
+ <li>{{cssxref("minmax", "minmax()")}}</li>
+ <li>{{cssxref("fit-content", "fit-content()")}}</li>
+</ul>
+</div>
+
+<h3 id="CSS_資料型別">CSS 資料型別</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;flex&gt;")}}</li>
+</ul>
+</div>
+
+<h3 id="詞匯表條目">詞匯表條目</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Lines">網格線</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Tracks">格線軌道</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Cell">格線單元</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Areas">格線區域</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Gutters">間距</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Axis">格線軸</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Rows">格線行</a></li>
+ <li><a href="/zh-TW/docs/Glossary/Grid_Column">格線列</a></li>
+</ul>
+</div>
+
+<h2 id="指引">指引</h2>
+
+<div class="index">
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局的基本概念</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">格線布局與其它布局的關係</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的格線命名排版</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的網格線排版</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">在 CSS 自動放置格線布局</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">用 Box 對齊 CSS 格線布局</a></li>
+ <li><br>
+  <a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS 格線、邏輯值和寫作模式</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局與無障礙</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線與漸進增強</a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">用 CSS 格線實做常見排版</a></li>
+</ul>
+</div>
+
+<h2 id="外部資源">外部資源</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">Jen Simmons 的示範</a></li>
+ <li><a href="http://gridbyexample.com/">格線示例：一些影片教學與使用範例</a></li>
+ <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops 格線參考</a></li>
+ <li><a href="/zh-TW/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
+ <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
+</ul>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">格式</th>
+   <th scope="col">狀態</th>
+   <th scope="col">意見</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Grid') }}</td>
+   <td>{{ Spec2('CSS3 Grid') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線布局</a></li>
+ <li data-default-state="open"><a href="#"><strong>參考</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局基本概念</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">與其他布局的關系</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基於行展示的位置</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定網格線布局</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">自動放置格線布局</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">格線布局中的框對齊</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">格線，邏輯值和寫入模式</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局和輔助功能</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線布局與漸進式增強</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用格線實現常見的布局</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格</a> </li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-area">網格區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">網格自動列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">網格自動流</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">網格自動行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column">網格列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-end">結束網格列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">網格柱間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-column-start">啟動網格</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-gap">網格間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row">網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-end">結束網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">網格行間隙</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-row-start">啟動網格行</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template">網格模板</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">網格模板區域</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">網格模板的列</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">網格模板的行</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>詞匯表</strong></a>
+  <ol>
+   <li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_lines">網格線</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_tracks">網格軌道</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_cell">網格單元格</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_areas">網格區域</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Gutters">间距</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_Axis">網格軸</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_rows">網格行</a></li>
+   <li><a href="/zh-TW/docs/Glossary/Grid_column">網格列</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html
new file mode 100644
index 0000000000..cdde84086c
--- /dev/null
+++ b/files/zh-tw/web/css/css_lists_and_counters/consistent_list_indentation/index.html
@@ -0,0 +1,67 @@
+---
+title: 調整列表縮排
+slug: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+tags:
+  - CSS
+  - list indent
+  - 列表
+  - 縮排
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+<p>原文 : <a href="/en/Consistent_List_Indentation" title="en/Consistent_List_Indentation">Consistent List Indentation</a></p>
+
+
+<p>  使用 CSS 來協助縮排列表看來簡單實則卻否，原因很簡單 - 各大瀏覽器其實作方式不盡相同。一個很大的原因來自於對距離的掌握，但這很讓人喪志，因為瀏覽器沒有一致的排版方式。舉例來說，倘若你宣告一個 list 沒有 left margin，在 IE 中他可以被移動，但在 Gecko-based 的瀏覽器中他們將很固執的固定在那。</p>
+
+  <p>  為了更徹底明白為何有這種情況發生，了解列表是怎樣被創造的至關重要。</p>
+  <h3 id="Making_a_List" name="Making_a_List">創建列表</h3>
+  <p>  首先，我們考慮一個最簡單的 list item。他並不屬於任何一個 list 中，並且也沒有項目符號 (意思就是沒有 bullet )。如 Figure 1 所示：</p>
+  <p><img align="none" alt="Figure 1" class="internal" src="/@api/deki/files/619/=Consistent-list-indentation-figure1.gif"></p>
+  <p>  這裡的紅點線框是 list 內容的外框。在這裡的例子中， list item 並沒有設定 padding 或 borders。現在我們加上兩個 list item，如圖二：</p>
+  <p><img align="none" alt="Figure 2" class="internal" src="/@api/deki/files/620/=Consistent-list-indentation-figure2.gif"></p>
+  <p>  接著我們加上 parent element，這裡我們以 unordered list (i.e., <code>&lt;ul&gt;</code>)為例。根據 CSS box model，這些 list item 都會被包裹在 parent element 的範圍中。如下圖中的紫色外框，他包住了三個 list item 的外圍：</p>
+  <p><img align="none" alt="Figure 3" class="internal" src="/@api/deki/files/621/=Consistent-list-indentation-figure3.gif"></p>
+  <p>  然後我們加上 list item markers。因為我們用的是 unordered list，因此使用預設的 filled-circle "bullets"。結果如下：</p>
+  <p><img align="none" alt="Figure 4" class="internal" src="/@api/deki/files/622/=Consistent-list-indentation-figure4.gif"></p>
+  <p>  好的，現在看出來了，這些 marker 在 <code>&lt;ul&gt; 空間之外。但更重要的是，這些 marker 其實是在 &lt;li&gt; 之外！這個結果使得 list item 看起來像是附加在 marker 之上。</code></p>
+  <p>  結論出來了，在瀏覽器(除了 windows 下的 IE)處理列表時， marker 是在 <code>&lt;li&gt;</code> element 的外頭。所以這些個對 list item 的設定並不會對 marker 造成影響，影響的是其後附加的內容。</p>
+  <h3 id="Indenting_It_Twice" name="Indenting_It_Twice">二次縮排</h3>
+  <p>  所以我們該如何設定其外觀？現在讓我們來分析一下下們這組設定：</p>
+  <pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
+  <p>  當套用了這組設定， marker 將會很悲劇的落到畫面之外。</p>
+  <p>  為了避免這種慘劇發生，瀏覽器有三種不同的實作方式來避免：</p>
+  <ol>
+    <li>幫每一個 <code>&lt;li&gt;</code> element 設定 left margin</li>
+    <li>幫 <code>&lt;ul&gt;</code> element 設定 left margin</li>
+    <li>幫 <code>&lt;ul&gt;</code> element 設定一些 left padding</li>
+  </ol>
+  <p>  事後檢視，沒有瀏覽器採用第一種作法。Windows and Macintosh 上的 Internet Explorer 和 Opera 採用第二種作法。Gecko 相關的瀏覽器則使用第三種設計。</p>
+  <p>  現在讓我們來瞧瞧後兩種作法的差異。在 Internet Explorer 及 Opera 中，&lt;ul&gt; element 為了縮排需要被設定了 40 pixel 的 left margin。假如我們此時在 <code>&lt;ul&gt;</code> element 設定背景顏色，其結果如下：</p>
+  <p><img align="none" alt="Figure 5" class="internal" src="/@api/deki/files/623/=Consistent-list-indentation-figure5.gif"></p>
+  <p>  Gecko 則不太一樣，他為 <code>&lt;ul&gt;</code> element 設定了 40 pixel 的 left <em>padding</em>。因此造成上圖的程式碼會在 Gecko 中變成下圖：</p>
+  <p><img align="none" alt="Figure 6" class="internal" src="/@api/deki/files/624/=Consistent-list-indentation-figure6.gif"></p>
+  <p>  從結果來說，marker 都很好的附著在 <code>&lt;li&gt;</code> element 之前並未消失。唯一的不同點是發生在你替 <code>&lt;ul&gt;</code> element 設定背景顏色時。</p>
+  <h3 id="Finding_Consistency" name="Finding_Consistency">不變的是 ...</h3>
+  <p>  現在我們知道，若你希望在 Gecko, Internet Explorer 和 Opera 都有一樣的 list 外觀， <code>&lt;ul&gt;</code> element 的 left margin 和 left padding 都要設定。你大可不必理會 <code>&lt;li&gt;</code> 的設定。</p>
+  <p>  假如你想要有 Netscape 6.x 的預設風格，寫法如下：</p>
+  <pre>ul {margin-left: 0; padding-left: 40px;}</pre>
+  <p>  若你對 Explorer/Opera 風格有興趣，可以寫成：</p>
+  <pre>ul {margin-left: 40px; padding-left: 0;}</pre>
+  <p>  當然啦，你可以不用 pixel 來表示長度，取而代之的可以使用類似 <code>1.25em</code> 的寫法。現在若你想要重設列表，而不打算有任何縮排，可以這樣寫：</p>
+  <pre>ul {margin-left: 0; padding-left: 0;}</pre>
+  <p>  請注意，這樣的寫法將造成 bullet 被扔在整個列表及其 parent element 之外。當你在 <code>body 中這樣寫，很顯然的你的 </code>bullet 將不會出現在你的視窗內。</p>
+  <h3 id="Conclusion" name="Conclusion">結論</h3>
+  <p>  在這篇文章中我們並未指出哪個瀏覽器對 list 縮排的處理是正確的。之所以會有不同的排版方式只是因為他們採用了不同的排版方法。確定你設定了 list 的 left padding 和 left margin，這樣你比較能寫出跨瀏覽器良好縮排程式。</p>
+  <h3 id="Recommendations" name="Recommendations">建議</h3>
+  <ul>
+    <li>在你調整列表的縮排時，務必確定你設定了 padding 和 margin。</li>
+  </ul>
+  <div class="originaldocinfo">
+    <h3 id="Original_Document_Information" name="Original_Document_Information">關於此文件</h3>
+    <ul>
+      <li>Author(s): Eric A. Meyer, Netscape Communications</li>
+      <li>Last Updated Date: Published 30 Aug 2002</li>
+      <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+      <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+    </ul>
+  </div>
diff --git a/files/zh-tw/web/css/css_lists_and_counters/index.html b/files/zh-tw/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..08b7fc4bcf
--- /dev/null
+++ b/files/zh-tw/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,127 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>CSS Lists and Counters</strong> is a module of CSS that defines how lists are laid out, how the list marker can be styled and how authors can create new counters.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="屬性">屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("list-style-image")}}</li>
+ <li>{{cssxref("list-style-type")}}</li>
+ <li>{{cssxref("list-style-position")}}</li>
+ <li>{{cssxref("list-style")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+</div>
+
+<h3 id="At-rules">At-rules</h3>
+
+<dl>
+ <dt>{{cssxref("@counter-style")}}</dt>
+ <dd>
+ <div class="index">
+ <ul>
+  <li>{{cssxref("@counter-style/system","system")}}</li>
+  <li>{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}</li>
+  <li>{{cssxref("@counter-style/negative", "negative")}}</li>
+  <li>{{cssxref("@counter-style/prefix", "prefix")}}</li>
+  <li>{{cssxref("@counter-style/suffix", "suffix")}}</li>
+  <li>{{cssxref("@counter-style/range", "range")}}</li>
+  <li>{{cssxref("@counter-style/pad", "pad")}}</li>
+  <li>{{cssxref("@counter-style/speak-as", "speak-as")}}</li>
+  <li>{{cssxref("@counter-style/fallback", "fallback")}}</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation">Consistent list indentation</a></dt>
+ <dd>Explains how to reach a consistent indentation between different browsers.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Using CSS counters</a></dt>
+ <dd>Describes how to use counters to be able to use numbering outside of traditional list elements or to perform complex counting.</dd>
+</dl>
+
+<h2 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 Lists')}}</td>
+   <td>{{Spec2('CSS3 Lists')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'generate.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_positioning/index.html b/files/zh-tw/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0fe6fd55d0
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/index.html
@@ -0,0 +1,108 @@
+---
+title: CSS Positioning
+slug: Web/CSS/CSS_Positioning
+translation_of: Web/CSS/CSS_Positioning
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>CSS Positioning</strong> is a module of CSS that defines how to absolutely and relavitely position elements on the page.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="CSS_屬性">CSS 屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("bottom")}}</li>
+ <li>{{cssxref("clear")}}</li>
+ <li>{{cssxref("display")}}</li>
+ <li>{{cssxref("float")}}</li>
+ <li>{{cssxref("left")}}</li>
+ <li>{{cssxref("position")}}</li>
+ <li>{{cssxref("right")}}</li>
+ <li>{{cssxref("top")}}</li>
+ <li>{{cssxref("visibility")}}</li>
+ <li>{{cssxref("z-index")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index">Understanding CSS z-index</a></dt>
+ <dd>Presents the notion of stacking context and explain how z-ordering works, with several examples.</dd>
+</dl>
+
+<h2 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 Positioning') }}</td>
+   <td>{{ Spec2('CSS3 Positioning') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'visuren.html') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoDesktop("1") }}</td>
+   <td>5.0</td>
+   <td>6.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{ CompatGeckoMobile("1") }}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..8bfd77a677
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,40 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - TopicStub
+  - Understanding_CSS_z-index
+  - Web
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+<p>Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. <span class="seoSummary">The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.</span></p>
+<blockquote>
+ <p style=""><em>In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.</em></p>
+</blockquote>
+<p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p>
+<p>It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS {{ cssxref("z-index") }} property.</p>
+<p>Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or even unpredictable. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> to explain these rules better.</p>
+<p>This article will try to explain those rules, with some simplification and several examples.</p>
+<ol>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without z-index</a> : Default stacking rules</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li>
+</ol>
+<p><small><em>Note of the author: Thanks to Wladimir Palant and Rod Whiteley for the review.</em> </small></p>
+<div class="originaldocinfo">
+ <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+ <ul>
+  <li>Author(s): Paolo Lombardi</li>
+  <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li>
+  <li>Last Updated Date: July 9th, 2005</li>
+ </ul>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
new file mode 100644
index 0000000000..26771f0fbb
--- /dev/null
+++ b/files/zh-tw/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html
@@ -0,0 +1,139 @@
+---
+title: Stacking context example 1
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1
+---
+<p><font><font>« </font></font><a href="/en/CSS" title="CSS"><font><font>CSS</font></font></a><font><font> « </font></font><a href="/en/CSS/Understanding_z-index" title="了解CSS的z-index"><font><font>理解CSS的z-index</font></font></a></p>
+
+<h3 id="堆疊環境範例1"><font><font>堆疊環境範例1</font></font></h3>
+
+<p><font><font>讓我們先從一個基本的例子。</font><font>根堆疊情況下，我們有兩個div（DIV＃1和＃DIV 3），兩種相對定位的，但是如果沒有的z-index屬性。</font><font>裡面DIV＃1有一個絕對定位的div＃2，而在DIV＃3有一個絕對定位的div＃4，雙方沒有的z-index屬性。</font></font></p>
+
+<p><font><font>唯一的堆疊上下文是根上下文。</font><font>如果沒有Z-指標，要素依次層疊的發生。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/914/=Understanding_zindex_05a.png"></p>
+
+<p><font><font>如果DIV＃2被分配一個正的（非零和非自動）z索引值，它是上述所有其他的DIV呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/915/=Understanding_zindex_05b.png"></p>
+
+<p><font><font>然後，如果DIV＃4也被分配比DIV＃2的Z指數正z指數越大，它上面的所有其他的DIV DIV，包括2＃呈現。</font></font></p>
+
+<p><img alt="堆疊環境範例1" class="internal" src="/@api/deki/files/916/=Understanding_zindex_05c.png"></p>
+
+<p><font><font>在最後的例子，你可以看到，DIV＃2和＃DIV 4不兄弟姐妹，因為它們屬於不同的家長在HTML元素的層次結構。</font><font>即便如此，DIV＃4堆疊相的DIV＃2可以通過z索引來控制。</font><font>碰巧的是，由於DIV＃1和＃DIV 3不指定任何的z-index值，他們不創造一個堆疊環境。</font><font>這意味著，所有的內容，包括DIV＃2和DIV＃4屬於相同根堆疊環境。</font></font></p>
+
+<p><font><font>在堆疊上下文而言，DIV＃1和DIV＃3簡單地同化到根元素，將得到的層次結構如下：</font></font></p>
+
+<ul>
+ <li><font><font>根堆疊環境</font></font>
+
+  <ul>
+   <li><font><font>DIV＃2（Z-指數1）</font></font></li>
+   <li><font><font>DIV＃4（Z-指數2）</font></font></li>
+  </ul>
+ </li>
+</ul>
+
+<div class="note"><strong><font><font>注：</font></font></strong><font><font> DIV＃1和＃DIV 3不適透亮。</font><font>重要的是要記住，分配的不透明度小於1到定位的元素隱式創建一個疊加的背景下，就像一個加入的z-index值是非常重要的。</font><font>這個例子顯示，當父元素不會創建一個堆疊環境會發生什麼。</font></font></div>
+
+<h3 id="示例源代碼"><strong><font><font>示例源代碼</font></font></strong></h3>
+
+<pre class="brush: html"><font><font>&lt;！DOCTYPE HTML PUBLIC“ -  // W3C // DTD XHTML 1.0過渡// EN”</font></font><font><font>
+“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;</font></font><font><font>
+&lt;HTML&gt;</font></font><font><font>
+&lt;HEAD&gt; &lt;風格類型=“文本/ CSS”&gt;</font></font>
+<font><font>
+DIV {字體：12px的宋體; </font><font>}</font></font>
+<font><font>
+span.bold {字體重量：大膽的; </font><font>}</font></font>
+<font><font>
+＃DIV1，＃{DIV3</font></font><font><font>
+   高度：80px;</font></font><font><font>
+   位置：親屬;</font></font><font><font>
+   邊界：1px的虛線＃669966;</font></font><font><font>
+   背景色：#ccffcc;</font></font><font><font>
+   填充左：5px的;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV2</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：1;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：150像素;</font></font><font><font>
+   高度：200像素;</font></font><font><font>
+   頂：20像素;</font></font><font><font>
+   左：170px;</font></font><font><font>
+   邊界：1px的虛線＃990000;</font></font><font><font>
+   背景色：#ffdddd;</font></font><font><font>
+   文本對齊：中心;</font></font><font><font>
+}</font></font>
+<font><font>
+＃{DIV4</font></font><font><font>
+   不透明度：0.8;</font></font><font><font>
+   的z-index：2;</font></font><font><font>
+   位置：絕對的;</font></font><font><font>
+   寬度：200像素;</font></font><font><font>
+   高度：70px;</font></font><font><font>
+   頂部：65px;</font></font><font><font>
+   左：50像素;</font></font><font><font>
+   邊界：1px的虛線＃000099;</font></font><font><font>
+   背景色：#ddddff;</font></font><font><font>
+   文本對齊：左;</font></font><font><font>
+   填充左：10px的;</font></font><font><font>
+}</font></font>
+
+<font><font>
+&lt;/風格&gt; &lt;/ HEAD&gt;</font></font>
+<font><font>
+&lt;BODY&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV1”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃1 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV2”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃2 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：1;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;br /&gt;</font></font>
+<font><font>
+&lt;DIV ID =“DIV3”&gt;</font></font><font><font>
+&lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃3 &lt;/ SPAN&gt;</font></font><font><font>
+&lt;br /&gt;位置：親屬;</font></font><font><font>
+   &lt;DIV ID =“DIV4”&gt;</font></font><font><font>
+   &lt;br /&gt;的&lt;span class =“黑體”&gt; DIV＃4 &lt;/ SPAN&gt;</font></font><font><font>
+   &lt;br /&gt;位置：絕對的;</font></font><font><font>
+   &lt;br /&gt;的z-index：2;</font></font><font><font>
+   &lt;/ DIV&gt;</font></font><font><font>
+&lt;/ DIV&gt;</font></font>
+<font><font>
+&lt;/ BODY&gt; &lt;/ HTML&gt;</font></font>
+</pre>
+
+<h3 id="另請參見"><font><font>另請參見</font></font></h3>
+
+<ul>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="EN / CSS / Understanding_z指數/ Stacking_without_z指數"><font><font>無堆疊的z-index</font></font></a><font><font>  ：默認規則疊加</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="EN / CSS / Understanding_z指數/ Stacking_and_float"><font><font>堆疊和浮動</font></font></a><font><font>  ：如何浮動元素的處理方式</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="EN / CSS / Understanding_z指數/ Adding_z指數"><font><font>添加的z-index</font></font></a><font><font>  ：使用的z-index來改變默認的堆疊</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="EN / CSS / Understanding_z指數/ The_stacking_context"><font><font>堆疊背景</font></font></a><font><font>  ：在堆疊環境票據</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="EN / CSS / Understanding_z指數/ Stacking_context_example_2"><font><font>堆疊環境例子2</font></font></a><font><font>  ：在所有層面上2級HTML層次，Z指數</font></font></li>
+ <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="EN / CSS / Understanding_z指數/ Stacking_context_example_3"><font><font>堆疊上下文例3</font></font></a><font><font>  ：3級的HTML等級，在第二級上的z索引</font></font><span id="cke_bm_89E" style="display: none;"> </span></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information"><font><font>原始文檔信息</font></font></h3>
+
+<ul>
+ <li><font><font>作者（S）：保羅·隆巴迪</font></font></li>
+ <li><font><font>這篇文章是我寫的文章在意大利的英譯</font></font><a class="external" href="http://www.yappy.it"><font><font>YappY</font></font></a><font><font>。</font><font>我同意共享下的所有內容正確</font></font><a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/"><font><font>知識共享：署名-相同方式共享許可</font></font></a></li>
+ <li><font><font>最後更新日期：2005年7月9日</font></font></li>
+</ul>
+</div>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/css_properties_reference/index.html b/files/zh-tw/web/css/css_properties_reference/index.html
new file mode 100644
index 0000000000..74d192427e
--- /dev/null
+++ b/files/zh-tw/web/css/css_properties_reference/index.html
@@ -0,0 +1,317 @@
+---
+title: CSS 屬性參考
+slug: Web/CSS/CSS_Properties_Reference
+translation_of: Web/CSS/CSS_Properties_Reference
+---
+<h2 id="常見_CSS_屬性參考">常見 CSS 屬性參考</h2>
+
+<p>下列為最為常見的 CSS 屬性基本清單及其對應的 文件物件模型(DOM)屬性——通常由 JavaScript 進行存取：</p>
+
+<div class="note"><strong>備註:</strong>  此清單並不完整， 更多屬性請見  <a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考文件</a> 與  <a href="en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a>。 CSS參考文件也包含屬性使用範例。</div>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col"><strong>CSS</strong></th>
+   <th scope="col"><strong>JavaScript</strong></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>background</td>
+   <td>background</td>
+  </tr>
+  <tr>
+   <td>background-attachment</td>
+   <td>backgroundAttachment</td>
+  </tr>
+  <tr>
+   <td>background-color</td>
+   <td>backgroundColor</td>
+  </tr>
+  <tr>
+   <td>background-image</td>
+   <td>backgroundImage</td>
+  </tr>
+  <tr>
+   <td>background-position</td>
+   <td>backgroundPosition</td>
+  </tr>
+  <tr>
+   <td>background-repeat</td>
+   <td>backgroundRepeat</td>
+  </tr>
+  <tr>
+   <td>border</td>
+   <td>border</td>
+  </tr>
+  <tr>
+   <td>border-bottom</td>
+   <td>borderBottom</td>
+  </tr>
+  <tr>
+   <td>border-bottom-color</td>
+   <td>borderBottomColor</td>
+  </tr>
+  <tr>
+   <td>border-bottom-style</td>
+   <td>borderBottomStyle</td>
+  </tr>
+  <tr>
+   <td>border-bottom-width</td>
+   <td>borderBottomWidth</td>
+  </tr>
+  <tr>
+   <td>border-color</td>
+   <td>borderColor</td>
+  </tr>
+  <tr>
+   <td>border-left</td>
+   <td>borderLeft</td>
+  </tr>
+  <tr>
+   <td>border-left-color</td>
+   <td>borderLeftColor</td>
+  </tr>
+  <tr>
+   <td>border-left-style</td>
+   <td>borderLeftStyle</td>
+  </tr>
+  <tr>
+   <td>border-left-width</td>
+   <td>borderLeftWidth</td>
+  </tr>
+  <tr>
+   <td>border-right</td>
+   <td>borderRight</td>
+  </tr>
+  <tr>
+   <td>border-right-color</td>
+   <td>borderRightColor</td>
+  </tr>
+  <tr>
+   <td>border-right-style</td>
+   <td>borderRightStyle</td>
+  </tr>
+  <tr>
+   <td>border-right-width</td>
+   <td>borderRightWidth</td>
+  </tr>
+  <tr>
+   <td>border-style</td>
+   <td>borderStyle</td>
+  </tr>
+  <tr>
+   <td>border-top</td>
+   <td>borderTop</td>
+  </tr>
+  <tr>
+   <td>border-top-color</td>
+   <td>borderTopColor</td>
+  </tr>
+  <tr>
+   <td>border-top-style</td>
+   <td>borderTopStyle</td>
+  </tr>
+  <tr>
+   <td>border-top-width</td>
+   <td>borderTopWidth</td>
+  </tr>
+  <tr>
+   <td>border-width</td>
+   <td>borderWidth</td>
+  </tr>
+  <tr>
+   <td>clear</td>
+   <td>clear</td>
+  </tr>
+  <tr>
+   <td>clip</td>
+   <td>clip</td>
+  </tr>
+  <tr>
+   <td>color</td>
+   <td>color</td>
+  </tr>
+  <tr>
+   <td>cursor</td>
+   <td>cursor</td>
+  </tr>
+  <tr>
+   <td>display</td>
+   <td>display</td>
+  </tr>
+  <tr>
+   <td>filter</td>
+   <td>filter</td>
+  </tr>
+  <tr>
+   <td>font</td>
+   <td>font</td>
+  </tr>
+  <tr>
+   <td>font-family</td>
+   <td>fontFamily</td>
+  </tr>
+  <tr>
+   <td>font-size</td>
+   <td>fontSize</td>
+  </tr>
+  <tr>
+   <td>font-variant</td>
+   <td>fontVariant</td>
+  </tr>
+  <tr>
+   <td>font-weight</td>
+   <td>fontWeight</td>
+  </tr>
+  <tr>
+   <td>height</td>
+   <td>height</td>
+  </tr>
+  <tr>
+   <td>left</td>
+   <td>left</td>
+  </tr>
+  <tr>
+   <td>letter-spacing</td>
+   <td>letterSpacing</td>
+  </tr>
+  <tr>
+   <td>line-height</td>
+   <td>lineHeight</td>
+  </tr>
+  <tr>
+   <td>list-style</td>
+   <td>listStyle</td>
+  </tr>
+  <tr>
+   <td>list-style-image</td>
+   <td>listStyleImage</td>
+  </tr>
+  <tr>
+   <td>list-style-position</td>
+   <td>listStylePosition</td>
+  </tr>
+  <tr>
+   <td>list-style-type</td>
+   <td>listStyleType</td>
+  </tr>
+  <tr>
+   <td>margin</td>
+   <td>margin</td>
+  </tr>
+  <tr>
+   <td>margin-bottom</td>
+   <td>marginBottom</td>
+  </tr>
+  <tr>
+   <td>margin-left</td>
+   <td>marginLeft</td>
+  </tr>
+  <tr>
+   <td>margin-right</td>
+   <td>marginRight</td>
+  </tr>
+  <tr>
+   <td>margin-top</td>
+   <td>marginTop</td>
+  </tr>
+  <tr>
+   <td>overflow</td>
+   <td>overflow</td>
+  </tr>
+  <tr>
+   <td>padding</td>
+   <td>padding</td>
+  </tr>
+  <tr>
+   <td>padding-bottom</td>
+   <td>paddingBottom</td>
+  </tr>
+  <tr>
+   <td>padding-left</td>
+   <td>paddingLeft</td>
+  </tr>
+  <tr>
+   <td>padding-right</td>
+   <td>paddingRight</td>
+  </tr>
+  <tr>
+   <td>padding-top</td>
+   <td>paddingTop</td>
+  </tr>
+  <tr>
+   <td>page-break-after</td>
+   <td>pageBreakAfter</td>
+  </tr>
+  <tr>
+   <td>page-break-before</td>
+   <td>pageBreakBefore</td>
+  </tr>
+  <tr>
+   <td>position</td>
+   <td>position</td>
+  </tr>
+  <tr>
+   <td>float</td>
+   <td>cssFloat</td>
+  </tr>
+  <tr>
+   <td>text-align</td>
+   <td>textAlign</td>
+  </tr>
+  <tr>
+   <td>text-decoration</td>
+   <td>textDecoration</td>
+  </tr>
+  <tr>
+   <td>text-decoration: blink</td>
+   <td>textDecorationBlink</td>
+  </tr>
+  <tr>
+   <td>text-decoration: line-through</td>
+   <td>textDecorationLineThrough</td>
+  </tr>
+  <tr>
+   <td>text-decoration: none</td>
+   <td>textDecorationNone</td>
+  </tr>
+  <tr>
+   <td>text-decoration: overline</td>
+   <td>textDecorationOverline</td>
+  </tr>
+  <tr>
+   <td>text-decoration: underline</td>
+   <td>textDecorationUnderline</td>
+  </tr>
+  <tr>
+   <td>text-indent</td>
+   <td>textIndent</td>
+  </tr>
+  <tr>
+   <td>text-transform</td>
+   <td>textTransform</td>
+  </tr>
+  <tr>
+   <td>top</td>
+   <td>top</td>
+  </tr>
+  <tr>
+   <td>vertical-align</td>
+   <td>verticalAlign</td>
+  </tr>
+  <tr>
+   <td>visibility</td>
+   <td>visibility</td>
+  </tr>
+  <tr>
+   <td>width</td>
+   <td>width</td>
+  </tr>
+  <tr>
+   <td>z-index</td>
+   <td>zIndex</td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-tw/web/css/css_selectors/index.html b/files/zh-tw/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..5f52beea02
--- /dev/null
+++ b/files/zh-tw/web/css/css_selectors/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>選擇器</strong>可以定義某組 CSS 樣式要套用到哪些元素上。</p>
+
+<h2 id="基本選擇器">基本選擇器</h2>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Web/CSS/Universal_selectors">通用選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors" rel="noopener"><font><font>Universal selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有元素。（可選）可以將其限制為特定的名稱空間或所有名稱空間。<br>
+ <strong>語法:</strong> <code>* ns|* *|*</code><br>
+ <strong>範例:</strong> <code>*</code> 套用文檔中所有元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Type_selectors">標籤選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors" rel="noopener"><font><font>Type selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定標籤的元素。<br>
+ <strong>語法:</strong> <code><var>elementname</var></code><br>
+ <strong>範例:</strong> <code>input</code> 可選出任一 <a href="/zh-TW/docs/Web/HTML/Element/input">&lt;input&gt;</a> 元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Class_selectors">類別選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors" rel="noopener"><font><font>Class selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定 <code>class</code> 屬性值的元素。<br>
+ <strong>語法:</strong> <code>.<var>classname</var></code><br>
+ <strong>範例:</strong> <code>.index</code> 可選出任一含有 <code>index</code> 的 class 屬性值之元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/ID_selectors">ID選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors" rel="noopener"><font><font>ID selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇指定 <code>id</code> 屬性值的元素。（一個文件中，每個ID屬性都是唯一的。）<br>
+ <strong>語法:</strong> <code>#<var>idname</var></code><br>
+ <strong>範例:</strong> <code>#toc</code> 會比對含有 ID 是 toc 的元素(可以定義成 <code>id="toc"</code> 或其他類似的定義)。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Attribute_selectors">屬性選擇器</a><font><font>（</font></font><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors" rel="noopener"><font><font>Attribute selector</font></font></a><font><font>）</font></font></dt>
+ <dd>用以選擇所有符合指定屬性的元素。<br>
+ <strong>語法:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>範例:</strong> <code>[autoplay]</code> 將會套用含有 <code>autoplay</code> 屬性的元素。(不論這個屬性的值是什麼)。</dd>
+</dl>
+
+<h2 id="分組選擇器">分組選擇器</h2>
+
+<dl>
+ <dt>選擇器列表（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a>）</dt>
+ <dd><code>,</code> 用以將不同的選擇器組合起來的一種方法。<br>
+ <strong>語法:</strong> <code><var>A</var>, <var>B</var></code><br>
+ <strong>範例:</strong> <code>div, span</code> 將同時選擇 <code><a href="/zh-TW/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 和 <code><a href="/zh-TW/docs/Web/HTML/Element/span">&lt;span&gt;</a></code> 元素。</dd>
+</dl>
+
+<h2 id="組合選擇器">組合選擇器</h2>
+
+<dl>
+ <dt></dt>
+ <dt><a href="/zh-TW/docs/Web/CSS/Descendant_combinator">後代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a>）</dt>
+ <dd><code> </code> (空格) 用以選擇某個元素後代的元素。<br>
+ <strong>語法:</strong> <code><var>A</var> <var>B</var></code><br>
+ <strong>範例:</strong> <code>div span</code> 套用所有  <code><a href="/zh-TW/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> 元素內部的所有 <code><a href="/en-US/docs/Web/HTML/Element/span">&lt;span&gt;</a></code> 元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Child_combinator">子代選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">Child combinator</a>）</dt>
+ <dd><code>&gt;</code> 用以選擇某個元素後代的元素。<br>
+ <strong>語法:</strong> <code><var>A</var> &gt; <var>B</var></code>（B元素不可在A元素的其他元素裡）<br>
+ <strong>範例:</strong> <code>ul &gt; li</code> 套用所有 <code><a href="/en-US/docs/Web/HTML/Element/li">&lt;li&gt;</a></code> 元素內部的 <code><a href="/en-US/docs/Web/HTML/Element/ul">&lt;ul&gt;</a></code> 子元素。</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/General_sibling_combinator">一般兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a>）</dt>
+ <dd><code>~</code> combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.<br>
+ <strong>語法:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>範例:</strong> <code>p ~ span</code> will match all {{HTMLElement("span")}} elements that follow a {{HTMLElement("p")}}, immediately or not.</dd>
+ <dt><a href="/zh-TW/docs/Web/CSS/Adjacent_sibling_combinator">相鄰兄弟選擇器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a>）</dt>
+ <dd><code>+</code> 選擇緊接在後的元素，並共享父元素。<br>
+ <strong>語法:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>範例:</strong> <code>h2 + p</code> 套用所有 緊接在 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h2&gt;</a></code> 元素後的 <a href="/zh-TW/docs/Web/HTML/Element/p">&lt;p&gt;</a> 元素，並擁有 <code><a href="/zh-TW/docs/Web/HTML/Element/Heading_Elements">&lt;h2&gt;</a></code> 的父元素。</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Column_combinator">Column combinator</a> {{Experimental_Inline}}</dt>
+ <dd>The <code>||</code> combinator selects nodes which belong to a column.<br>
+ <strong>語法:</strong> <code><var>A</var> || <var>B</var></code><br>
+ <strong>範例:</strong> <code>col || td</code> will match all {{HTMLElement("td")}} elements that belong to the scope of the {{HTMLElement("col")}}.</dd>
+</dl>
+
+<h2 id="偽選擇器">偽選擇器</h2>
+
+<dl>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Pseudo classes</a></dt>
+ <dd>The <code>:</code> pseudo allow the selection of elements based on state information that is not contained in the document tree.<br>
+ <strong>範例:</strong> <code>a:visited</code> will match all {{HTMLElement("a")}} elements that have been visited by the user.</dd>
+ <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Pseudo elements</a></dt>
+ <dd>The <code>::</code> pseudo represent entities that are not included in HTML.<br>
+ <strong>範例:</strong> <code>p::first-line</code> will match the first line of all {{HTMLElement("p")}} elements.</dd>
+</dl>
+
+<h2 id="規範">規範</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS4 Selectors")}}</td>
+   <td>{{Spec2("CSS4 Selectors")}}</td>
+   <td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS3 Selectors")}}</td>
+   <td>{{Spec2("CSS3 Selectors")}}</td>
+   <td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
+    Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Added the <code>&gt;</code> child and <code>+</code> adjacent sibling combinators.<br>
+    Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSS1")}}</td>
+   <td>{{Spec2("CSS1")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>See the <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..e21ca62c5f
--- /dev/null
+++ b/files/zh-tw/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,62 @@
+---
+title: '使用 :target'
+slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> As an aid to identifying the destination of a link that points to a specific portion of a document, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors</a> introduces the<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>. Netscape 7.1 introduced support for this pseudo-class into the Netscape family, giving authors a new way to assist users keep oriented within large documents.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">挑選目標</h3>
+
+<p>The pseudo-class<code> {{ Cssxref(":target") }} </code>is used to style the target element of a URI containing a fragment identifier. For example, the URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> contains the fragment identifier <code>#Example</code>. In HTML, identifiers are found as the values of either <code>id</code> or <code>name</code> attributes, since the two share the same namespace. Thus, the example URI would point to the heading "Example" in this document.</p>
+
+<p>Suppose you wish to style any<code> h2 </code>element that is the target of a URI, but do not want any other kind of element to get a target style. This is simple enough:</p>
+
+<pre>h2:target {font-weight: bold;}</pre>
+
+<p>It's also possible to create styles that are specific to a particular fragment of the document. This is done using the same identifying value that is found in the URI. Thus, to add a border to the <code>#Example</code> fragment, we would write:</p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">選擇所有元素</h3>
+
+<p>If the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy:</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">範例</h3>
+
+<p>In the following example, there are five links that point to elements in the same document. Selecting the "First" link, for example, will cause<code> &lt;h1 id="one"&gt; </code>to become the target element. Note that the document may jump to a new scroll position, since target elements are placed on the top of the browser window if possible.</p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">結論</h3>
+
+<p>In cases where a fragment identifier points to a portion of the document, readers may become confused about which part of the document they're supposed to be reading. By styling the target of a URI, reader confusion can be reduced or eliminated.</p>
+
+<h3 id="Related_Links" name="Related_Links">相關連結</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">文檔訊息</h3>
+
+<ul>
+ <li>作者群: Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>最後更新日期: Published 30 Jun 2003</li>
+ <li>版權: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>備註: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>
diff --git a/files/zh-tw/web/css/css_transitions/index.html b/files/zh-tw/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..30fb2738c2
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/index.html
@@ -0,0 +1,110 @@
+---
+title: CSS Transitions
+slug: Web/CSS/CSS_Transitions
+translation_of: Web/CSS/CSS_Transitions
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="屬性">屬性</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("transition")}}</li>
+ <li>{{cssxref("transition-delay")}}</li>
+ <li>{{cssxref("transition-duration")}}</li>
+ <li>{{cssxref("transition-property")}}</li>
+ <li>{{cssxref("transition-timing-function")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt>
+ <dd>Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact.</dd>
+</dl>
+
+<h2 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 Transitions')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</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>1.0 {{property_prefix("-webkit")}}<br>
+    26.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("16.0")}}</td>
+   <td>10.0</td>
+   <td>11.6 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.0 {{property_prefix("-webkit")}}<br>
+    6.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1 {{property_prefix("-webkit")}}</td>
+   <td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
+    {{CompatGeckoMobile("16.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.0 {{property_prefix("-o")}}<br>
+    12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
+   <td>3.2 {{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can trigger animations independently of value changes.</li>
+</ul>
diff --git a/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
new file mode 100644
index 0000000000..ecbdf92487
--- /dev/null
+++ b/files/zh-tw/web/css/css_transitions/using_css_transitions/index.html
@@ -0,0 +1,384 @@
+---
+title: CSS 轉場
+slug: Web/CSS/CSS_Transitions/Using_CSS_transitions
+tags:
+  - CSS animation
+  - CSS transition
+  - CSS 轉場
+  - CSS 過渡
+translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions
+---
+<h3 id="sect1">   </h3>
+<div>
+ <p>原文 : <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS_transitions">https://developer.mozilla.org/en/CSS/CSS_transitions</a></p>
+ <p> </p>
+ <div>
+  <p>{{ SeeCompatTable() }}</p>
+  <p>   CSS transitions 是 CSS3 specification 草案的一部分，他可以用來調整 CSS animation 變動的速度。舉例來說，倘若你設計了一個 element 會由白轉紅，你可以透過 CSS transitions 來控制轉變的時間及變化曲線。</p>
+  <div class="note">
+   <strong>注意：</strong> CSS transitions specification 目前仍舊以草案形式存在，所以當你要在 Gecko 的系統中使用時，記得加上 "-moz-" 的前綴。此外，為了更好的相容，你還得加上 "-webkit-" 前綴 (給基於 Webkit 技術的瀏覽器)以及 "-o-" (Opera 使用)。舉例來說，你可能會寫出包含有 <code>-moz-transition</code>, <code>-webkit-transition 及</code> <code>-o-transition 的程式。</code></div>
+  <h2 id="可供調整的_CSS_property_清單">可供調整的 CSS property 清單</h2>
+  <p>  CSS transitions 和 CSS animations 中可以用來修改的屬性在 <a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a> 可以看到。這裡頭同時包含了 SVG properties。</p>
+  <div class="note">
+   <strong>注意:</strong> 這些列出 properties 可能都還會改變，所以請使用已經被支援的那些，以免造成無法預期的結果。</div>
+  <h2 id="CSS_transition_properties">CSS transition properties</h2>
+  <p>  我們可以透過 {{ cssxref("transition") }} property 來控制 CSS transitions。這可有效避免使用過長的參數來控制你的 transitions，這樣亦減少了 debug 的難度。</p>
+  <p>  下列的 sub-properties 可以協助你控制轉場的性質：</p>
+  <dl>
+   <dt>
+    {{ cssxref("transition-property") }}</dt>
+   <dd>
+     定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。</dd>
+   <dt>
+    {{ cssxref("transition-duration") }}</dt>
+   <dd>
+    定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。</dd>
+   <dt>
+    {{ cssxref("transition-timing-function") }}</dt>
+   <dd>
+    設定轉場時所依據的貝茲曲線。</dd>
+   <dt>
+    {{ cssxref("transition-delay") }}</dt>
+   <dd>
+    定義多久之後開始發生轉場。</dd>
+  </dl>
+  <h2 id="使用漸變函式_(transition_timing_function)">使用漸變函式 (transition timing function)</h2>
+  <p>  漸變函式可用來定義轉場發生的時間曲線。其規範方式是以四個參數的貝茲曲線代表：</p>
+  <p><img alt="" src="/@api/deki/files/5226/=transition-timing-function.png"></p>
+  <p>  <a class="external" href="http://cssglue.com/cubic">CSS transition function manipulator</a> 是一個可以讓你非常容易以視覺化方式了解轉場流程的工具。</p>
+  <p>  除了自行定義之外，尚有幾個已經預先定義好的函式：</p>
+  <ul>
+   <li><strong>ease</strong>, 等同於 <code>cubic-bezier(0.25, 0.1, 0.25, 1.0)</code></li>
+   <li><strong>linear</strong>, 等同於 <code>cubic-bezier(0.0, 0.0, 1.0, 1.0)</code></li>
+   <li><strong>ease-in</strong>, 等同於 <code>cubic-bezier(0.42, 0, 1.0, 1.0)</code></li>
+   <li><strong>ease-out</strong>, 等同於 <code>cubic-bezier(0, 0, 0.58, 1.0)</code></li>
+   <li><strong>ease-in-out</strong>, 等同於 <code>cubic-bezier(0.42, 0, 0.58, 1.0)</code></li>
+  </ul>
+  <h3 id="一個_transition_timing_effect_範例">一個 transition timing effect 範例</h3>
+  <p>  我們在這直接用範例來說明。</p>
+  <p>  在看程式碼之前，或許你會想先看看實際的執行效果。請挑個有支援 transitions 的瀏覽器，然後<a href="/samples/cssref/transitions/sample3" title="samples/cssref/transitions/sample3">看看這個</a> (而<a href="/samples/cssref/transitions/sample3/transitions.css" title="samples/cssref/transitions/sample3/transitions.css">這裡</a>有這個範例的相關 CSS 程式碼)。</p>
+  <p>  首先，先以 HTML 創建這個範例的主要外殼：</p>
+  <pre class="brush: html">&lt;ul&gt;
+  &lt;li id="long1"&gt;Long, gradual transition...&lt;/li&gt;
+  &lt;li id="fast1"&gt;Very fast transition...&lt;/li&gt;
+  &lt;li id="delay1"&gt;Long transition with a 2-second delay...&lt;/li&gt;
+  &lt;li id="easeout"&gt;Using ease-out timing...&lt;/li&gt;
+  &lt;li id="linear"&gt;Using linear timing...&lt;/li&gt;
+  &lt;li id="cubic1"&gt;Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+  <p>  如你所見，每個 item 都有自己的 ID。剩下的部份交由 CSS 來處理。</p>
+  <h4 id="使用延遲機制">使用延遲機制</h4>
+  <p>  這個範例會在使用者滑鼠移過 element 後兩秒開始四秒的字體大小變化：</p>
+  <pre class="brush: css">#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+</pre>
+  <h4 id="使用線性轉場函式_(linear_transition_timing_function)">使用線性轉場函式 (linear transition timing function)</h4>
+  <p>  如果你希望動畫的變動是以線性的速率，那你可以寫成：</p>
+  <pre class="brush: css">transition-timing-function: linear;
+</pre>
+  <p>  此外，還有許多不同的 timing functions 供你選擇，請見 {{ cssxref("transition-timing-function") }}。</p>
+  <h4 id="用貝茲曲線定義_timing_function">用貝茲曲線定義 timing function</h4>
+  <p>  你可以定義自己想要的 timing function，這要用貝茲曲線 (cubic bezier curve) 的形式定義之：</p>
+  <pre class="brush: css">  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+</pre>
+  <p>  上例中我們定義了一個以 (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) 和 (1.0, 1.0) 描述的貝茲曲線。</p>
+  <h2 id="偵測_transition_的完成">偵測 transition 的完成</h2>
+  <p>  在設計上，當 transition 完成時會觸發一個 event。在 Firefox 中，他是 <code>transitionend ; 在</code> Opera 中，他是 <code>oTransitionEnd ; 而在</code> WebKit 中，他是  <code>webkitTransitionEnd。請注意相容性的問題(參閱本頁最下方)。</code></p>
+  <p>  <code>transitionend</code> event 提供了兩個 properties：</p>
+  <dl>
+   <dt>
+    <code>propertyName</code></dt>
+   <dd>
+    這指出哪個 CSS property 的 transition 已經完成。</dd>
+   <dt>
+    <code>elapsedTime</code></dt>
+   <dd>
+    指出 transition 花費了幾秒。注意，他不受 {{ cssxref("transition-delay") }} 影響。</dd>
+  </dl>
+  <p>  在平常使用上，你可以使用 {{ domxref("element.addEventListener()") }} method 來監控：</p>
+  <pre class="brush: js">el.addEventListener("transitionend", updateTransition, true);
+</pre>
+  <div class="note">
+   <strong>注意:</strong> "transitionend" event 若 transition 在執行中被中斷(意指 transition 沒有真正完成)則不會觸發。</div>
+  <h2 id="當_property_value_list_之間並不等長時_...">當 property value list 之間並不等長時 ... ?</h2>
+  <p>  如果某個 property 的 list 長度比其他短時，他將會被重複，直到等長。例如：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+</pre>
+  <p>  他會被瀏覽器解釋成：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}</pre>
+  <p>  可以預期地，倘若列出的 value 過多，他會被切斷。例如：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}</pre>
+  <p>  那麼他等同於：</p>
+  <pre class="brush: css">div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}</pre>
+  <h2 id="使用_transitions_來強調選單中的選項">使用 transitions 來強調選單中的選項</h2>
+  <p>  一個使用 CSS 的好時機是用來強調目前使用者滑鼠經過的選單位置。使用 transitions 可以使效果變得更吸引人。</p>
+  <p>  在看實際的程式碼之前，你可以先看<a href="/samples/cssref/transitions/sample2" title="samples/cssref/transitions/sample2">實際的範例</a> (當然你的瀏覽器要能支援 transitions)。相關的 CSS 程式在<a href="/samples/cssref/transitions/sample2/transitions.css" title="samples/cssref/transitions/sample2/transitions.css">這裡</a>。 </p>
+  <p>  我們先用 HTML 構建外殼：</p>
+  <pre class="brush: html">&lt;div class="sidebar"&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="home"&gt;Home&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="about"&gt;About&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;a class="menuButton" href="links"&gt;Links&lt;/a&gt;&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+  <p>  接著用 CSS 來產生特效：</p>
+  <pre class="brush: css">.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+</pre>
+  <p>  這些 CSS 程式使滑鼠滑過時 (在該 element 的 {{ cssxref(":hover") }} state) 造成背景及文字顏色的改變。</p>
+  <h2 id="使用_transitions_來使_JavaScript_運作的更順暢">使用 transitions 來使 JavaScript 運作的更順暢</h2>
+  <p>  Transition 是一種很好的工具，他可以幫助你的 JavaScript 執行結果看起來的更為順暢。舉例來說：</p>
+  <pre><span class="xml-punctuation">&lt;</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span><span class="xml-text">Click anywhere to move the ball</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">p</span><span class="xml-punctuation">&gt;</span>
+<span class="xml-punctuation">&lt;</span><span class="xml-tagname">div </span><span class="xml-attname">id</span><span class="xml-punctuation">=</span><span class="xml-attribute">"foo"</span><span class="xml-punctuation">&gt;</span><span class="xml-punctuation">&lt;/</span><span class="xml-tagname">div</span><span class="xml-punctuation">&gt;</span>
+</pre>
+  <p>  當你使用 JavaScript 可以將 ball 移動到特定位置：</p>
+  <pre><span class="js-keyword">var </span><span class="js-variable">f </span><span class="js-operator">= </span><span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">getElementById</span><span class="js-punctuation">(</span><span class="js-string">'foo'</span><span class="js-punctuation">)</span><span class="js-punctuation">;</span>
+<span class="js-variable">document</span><span class="js-punctuation">.</span><span class="js-property">addEventListener</span><span class="js-punctuation">(</span><span class="js-string">'click'</span><span class="js-punctuation">, </span><span class="js-keyword">function</span><span class="js-punctuation">(</span><span class="js-variabledef">ev</span><span class="js-punctuation">)</span><span class="js-punctuation">{</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">left </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientX</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="whitespace">    </span><span class="js-variable">f</span><span class="js-punctuation">.</span><span class="js-property">style</span><span class="js-punctuation">.</span><span class="js-property">top </span><span class="js-operator">= </span><span class="js-punctuation">(</span><span class="js-localvariable">ev</span><span class="js-punctuation">.</span><span class="js-property">clientY</span><span class="js-operator">-</span><span class="js-atom">25</span><span class="js-punctuation">)</span><span class="js-operator">+</span><span class="js-string">'px'</span><span class="js-punctuation">;</span>
+<span class="js-punctuation">}</span><span class="js-punctuation">,</span><span class="js-atom">false</span><span class="js-punctuation">)</span><span class="js-punctuation">;    </span>
+</pre>
+  <p>  藉由 CSS，你可以使執行結果更為流暢。我們加入了：</p>
+  <pre><span class="css-selector">p</span><span class="css-punctuation">{
+  </span><span class="css-identifier">padding-left</span><span class="css-punctuation">:</span><span class="css-unit">60px</span><span class="css-punctuation">;
+</span><span class="css-punctuation">}</span>
+<span class="css-selector">#foo</span><span class="css-punctuation">{</span>
+<span class="css-identifier">  border-radius</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  width</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  height</span><span class="css-punctuation">:</span><span class="css-unit">50px</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  background</span><span class="css-punctuation">:</span><span class="css-colorcode">#c00</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  position</span><span class="css-punctuation">:</span><span class="css-value">absolute</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  top</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  left</span><span class="css-punctuation">:</span><span class="css-unit">0</span><span class="css-punctuation">;</span>
+<span class="css-identifier">  -moz-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">; </span>
+<span class="css-identifier">  -webkit-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -ms-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  -o-transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-identifier">  transition</span><span class="css-punctuation">: </span><span class="css-value">all </span><span class="css-unit">1s</span><span class="css-punctuation">;  </span>
+<span class="css-punctuation">}</span>
+</pre>
+  <p>  你可以到 <a class="external" href="http://jsfiddle.net/RwtHn/5/" title="http://jsfiddle.net/RwtHn/5/">http://jsfiddle.net/RwtHn/5/</a> 看範例。</p>
+  <h2 id="使用_transition_events_來替_object_製作動畫">使用 transition events 來替 object 製作動畫</h2>
+  <p>  這裡讓我們看個例子，一個內含文字的方塊左右來回移動，並且會在兩種顏色之間做轉變：</p>
+  <p> </p>
+  <video controls src="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitiondemo1.ogv">
+    </video>
+  <p>  在我們仔細研究程式碼之前可以先看<a href="/samples/cssref/transitions/sample1" title="samples/cssref/transitions/sample1">範例</a>。同樣地，可以到<a href="/samples/cssref/transitions/sample1/transitions.css" title="samples/cssref/transitions/sample1/transitions.css">這</a>看其 CSS 的寫法。</p>
+  <h3 id="HTML_程式碼">HTML 程式碼</h3>
+  <p>  搭配上面範例的 HTML 程式碼並不複雜：</p>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;CSS Transition Demo&lt;/title&gt;
+    &lt;link rel="stylesheet" href="transitions.css" type="text/css"&gt;
+    &lt;script src="transitions.js" type="text/javascript"&gt;&lt;/script&gt;
+  &lt;/head&gt;
+  &lt;body onload="runDemo()"&gt;
+    &lt;div class="slideRight"&gt;This is a box!&lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+  <p>  這裡唯一要注意的地方是我們用 slideRight 來修飾 "This is a box!"。此外，在這個文件被讀取時，就會觸發 <code>runDemo()</code> function。</p>
+  <h3 id="CSS_程式碼">CSS 程式碼</h3>
+  <p>  我們使用 slideRight 和 slideLeft 這兩個 CSS class 來建構動畫 (請參閱 <a href="/samples/cssref/transitions/sample1/transitions.css" title="https://developer.mozilla.org/samples/cssref/transitions/sample1/transitions.css"><code>transitions.css</code></a> )。這裡列出部分：</p>
+  <pre class="brush: css">.slideRight {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+</pre>
+  <p>  我們再這明確定義了 position property。這是一件必要的事情，不然動畫將不知道如何開始。</p>
+  <p>  {{ cssxref("transition-property") }} property 指出哪些 CSS properties 會被包含在動畫效果中。在這個例子中是 {{ cssxref("background-color") }}, {{ cssxref("color") }} 以及 {{ cssxref("left") }}。 {{ cssxref("transition-duration") }} property 則說明了整個動畫將歷時 5 秒。</p>
+  <p>  為了相容於 WebKit 及 Opera，當中還定了一些以 "-webkit-" 和 "-o-" 起始的 property。</p>
+  <p>  總的來說， "slideRight" class 定義了最左端點時的狀態 (準備向右滑動)。所以你可以看到 {{ cssxref("left") }} property 是 0% 。</p>
+  <p>  下面我們定義了 "slideLeft" class，他表示最右端時的狀態 (準備向左滑動)：</p>
+  <pre class="brush: css">.slideLeft {
+  position: absolute;
+  -moz-transition-property: background-color, color, left;
+  -moz-transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}</pre>
+  <h3 id="JavaScript_程式碼">JavaScript 程式碼</h3>
+  <p>  在定義了左右兩端點的狀態後，現在我們可以準備來描述 animation 了。這可以簡單的透過 JavaScript 達成。</p>
+  <div class="note">
+   <strong>注意：</strong> 在這裡，倘若 <a class="external" href="/zh_tw/CSS_動畫" title="zh_tw/CSS_動畫">CSS animations</a> 被使用者的瀏覽器支援，那就未必要使用 JavaScript 了。</div>
+  <p>  首先定義 <code>runDemo()</code> function，他將在文件被讀取後立刻執行：</p>
+  <pre class="brush: js">function runDemo() {
+  var el = updateTransition();
+
+  // Set up an event handler to reverse the direction
+  // when the transition finishes.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+</pre>
+  <p>  他呼叫了 <code>updateTransition()</code> function (這待會會定義)，並且他捕捉了 "transitionend" event，這使我們能夠知道動畫結束了。</p>
+  <p><code><font face="'Lucida Grande', 'Lucida Sans Unicode', Lucida, Arial, Helvetica, sans-serif"><span style="line-height: 13px;">  </span></font>updateTransition()</code> function 內容如下：</p>
+  <pre class="brush: js">function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+</pre>
+  <p>  這裡的機制很簡單，我們找到 "slideLeft" 而後將他改變成 "slideRight"，接著動畫便結束。倘若此時並沒有 "slideLeft"，就表示已在右端點，於是執行反向動作。</p>
+  <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 (WebKit)</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>1.0</td>
+      <td>{{ CompatGeckoDesktop("2") }}</td>
+      <td>10</td>
+      <td>10.5</td>
+      <td>3.2</td>
+     </tr>
+     <tr>
+      <td>Property</td>
+      <td><code>-webkit-transition</code></td>
+      <td><code>-moz-transition</code></td>
+      <td><code>-ms-transition</code></td>
+      <td><code>-o-transition</code></td>
+      <td><code>-webkit-transition</code></td>
+     </tr>
+     <tr>
+      <td>Transition ended event</td>
+      <td><code>webkitTransitionEnd</code></td>
+      <td><code>transitionend</code></td>
+      <td><code>MSTransitionEnd</code></td>
+      <td><code>oTransitionEnd</code></td>
+      <td><code>webkitTransitionEnd</code></td>
+     </tr>
+    </tbody>
+   </table>
+  </div>
+  <div id="compat-mobile">
+   <table class="compat-table">
+    <tbody>
+     <tr>
+      <th>Feature</th>
+      <th>Android</th>
+      <th>Firefox Mobile (Gecko)</th>
+      <th>IE Phone</th>
+      <th>Opera Mobile</th>
+      <th>Safari Mobile</th>
+     </tr>
+     <tr>
+      <td>Basic support</td>
+      <td>2.1</td>
+      <td>{{ CompatGeckoMobile("2") }}</td>
+      <td>{{ CompatUnknown() }}</td>
+      <td>10</td>
+      <td>3.2</td>
+     </tr>
+    </tbody>
+   </table>
+  </div>
+  <h2 id="更多資訊">更多資訊</h2>
+  <ul>
+   <li><a class="external" href="http://dev.w3.org/csswg/css3-transitions/">CSS Transitions</a></li>
+   <li><a class="external" href="http://www.w3.org/TR/css3-transitions" title="http://www.w3.org/TR/css3-transitions">CSS Transitions Module Level 3</a></li>
+   <li><a class="external" href="http://oli.jp/2010/css-animatable-properties/">CSS animatable properties</a></li>
+   <li>{{ cssxref("-moz-transition") }}</li>
+   <li>{{ cssxref("-moz-transition-property") }}</li>
+   <li>{{ cssxref("-moz-transition-duration") }}</li>
+   <li>{{ cssxref("-moz-transition-timing-function") }}</li>
+   <li>{{ cssxref("-moz-transition-delay") }}</li>
+  </ul>
+  <p>{{ HTML5ArticleTOC() }}</p>
+  <p>{{ languages( { "es": "es/CSS/Transiciones_de_CSS", "ja": "ja/CSS/CSS_transitions" } ) }}</p>
+ </div>
+</div>
+<p> </p>
diff --git a/files/zh-tw/web/css/cursor/index.html b/files/zh-tw/web/css/cursor/index.html
new file mode 100644
index 0000000000..6e20cbbb43
--- /dev/null
+++ b/files/zh-tw/web/css/cursor/index.html
@@ -0,0 +1,306 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+translation_of: Web/CSS/cursor
+---
+<div>{{CSSRef}}</div>
+
+<p>此 <strong><code>cursor</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 屬性可以指定當滑鼠指標指向哪個物件時，顯示不同的游標.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
+
+
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* 關鍵字值 */
+cursor: pointer;
+cursor: auto;
+
+/* URL, with a keyword fallback */
+cursor: url(hand.cur), pointer;
+
+/* URL and coordinates, with a keyword fallback */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* 全域值 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+</pre>
+
+<p>The <code>cursor</code> property is specified as zero or more <code><a href="#&lt;url>">&lt;url&gt;</a></code> values, separated by commas, followed by a single mandatory <a href="#Keyword values">keyword value</a>. Each <code>&lt;url&gt;</code> should point to an image file. The browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).</p>
+
+<p>Each <code>&lt;url&gt;</code> may be optionally followed by a pair of space-separated numbers, which represent <code><a href="#&lt;x> &lt;y>">&lt;x&gt;&lt;y&gt;</a></code> coordinates. These will set the cursor's hotspot, relative to the top-left corner of the image.</p>
+
+<p>For example, this specifies two images using <code>&lt;url&gt;</code> values, providing <code>&lt;x&gt;&lt;y&gt;</code> coordinates for the second one, and falling back to the <code>progress</code> keyword value if neither image can be loaded:</p>
+
+<pre class="brush: css">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre>
+
+<h3 id="數值">數值</h3>
+
+<dl>
+ <dt><code id="&lt;url>">&lt;url&gt;</code></dt>
+ <dd>A <code>url(…)</code> or a comma separated list <code>url(…), url(…), …</code>, pointing to an image file. More than one {{cssxref("&lt;url&gt;")}} may be provided as fallbacks, in case some cursor image types are not supported. A non-URL fallback (one or more of the keyword values) <em>must</em> be at the end of the fallback list. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd>
+ <dt><a name="&lt;x> &lt;y>"><code>&lt;x&gt;</code> <code>&lt;y&gt;</code> </a>{{experimental_inline}}</dt>
+ <dd>Optional x- and y-coordinates. Two unitless nonnegative numbers less than 32.</dd>
+ <dt>關鍵字值</dt>
+ <dd>
+ <p><em>Move your mouse over values to see their live appearance in your browser:</em></p>
+
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th scope="col">分類</th>
+    <th scope="col">CSS 值</th>
+    <th scope="col">範例</th>
+    <th scope="col">備註說明</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr style="cursor: auto;">
+    <th rowspan="3" scope="row">一般</th>
+    <td><code>auto</code></td>
+    <td> </td>
+    <td>The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</td>
+   </tr>
+   <tr style="cursor: default;">
+    <td><code>default</code></td>
+    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td>The platform-dependent default cursor. Typically an arrow.</td>
+   </tr>
+   <tr style="cursor: none;">
+    <td><code>none</code></td>
+    <td> </td>
+    <td>No cursor is rendered.</td>
+   </tr>
+   <tr style="cursor: context-menu;">
+    <th rowspan="5" scope="row" style="cursor: auto;">連結與狀態</th>
+    <td><code>context-menu</code></td>
+    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td>A context menu is available.</td>
+   </tr>
+   <tr style="cursor: help;">
+    <td><code>help</code></td>
+    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td>Help information is available.</td>
+   </tr>
+   <tr style="cursor: pointer;">
+    <td><code>pointer</code></td>
+    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</td>
+   </tr>
+   <tr style="cursor: progress;">
+    <td><code>progress</code></td>
+    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</td>
+   </tr>
+   <tr style="cursor: wait;">
+    <td><code>wait</code></td>
+    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
+   </tr>
+   <tr style="cursor: cell;">
+    <th rowspan="4" scope="row" style="cursor: auto;">選取</th>
+    <td><code>cell</code></td>
+    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td>The table cell or set of cells can be selected.</td>
+   </tr>
+   <tr style="cursor: crosshair;">
+    <td><code>crosshair</code></td>
+    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td>Cross cursor, often used to indicate selection in a bitmap.</td>
+   </tr>
+   <tr style="cursor: text;">
+    <td><code>text</code></td>
+    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td>The text can be selected. Typically the shape of an I-beam.</td>
+   </tr>
+   <tr style="cursor: vertical-text;">
+    <td><code>vertical-text</code></td>
+    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
+   </tr>
+   <tr style="cursor: alias;">
+    <th rowspan="7" scope="row" style="cursor: auto;">拖曳</th>
+    <td><code>alias</code></td>
+    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td>An alias or shortcut is to be created.</td>
+   </tr>
+   <tr style="cursor: copy;">
+    <td><code>copy</code></td>
+    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something is to be copied.</td>
+   </tr>
+   <tr style="cursor: move;">
+    <td><code>move</code></td>
+    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something is to be moved.</td>
+   </tr>
+   <tr style="cursor: no-drop;">
+    <td><code>no-drop</code></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td>An item may not be dropped at the current location.<br>
+     {{bug("275173")}}: On Windows and Mac OS X, <code>no-drop</code> is the same as <code>not-allowed</code>.</td>
+   </tr>
+   <tr style="cursor: not-allowed;">
+    <td><code>not-allowed</code></td>
+    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td>The requested action will not be carried out.</td>
+   </tr>
+   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+    <td><code>grab</code></td>
+    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td>Something can be grabbed (dragged to be moved).</td>
+   </tr>
+   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+    <td><code>grabbing</code></td>
+    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td>Something is being grabbed (dragged to be moved).</td>
+   </tr>
+   <tr style="cursor: all-scroll;">
+    <th rowspan="15" scope="row" style="cursor: auto;">改變尺寸與捲軸尺</th>
+    <td><code>all-scroll</code></td>
+    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td>Something can be scrolled in any direction (panned).<br>
+     {{bug("275174")}}: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</td>
+   </tr>
+   <tr style="cursor: col-resize;">
+    <td><code>col-resize</code></td>
+    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</td>
+   </tr>
+   <tr style="cursor: row-resize;">
+    <td><code>row-resize</code></td>
+    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
+   </tr>
+   <tr style="cursor: n-resize;">
+    <td><code>n-resize</code></td>
+    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>
+     In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>
+   </tr>
+   <tr style="cursor: e-resize;">
+    <td><code>e-resize</code></td>
+    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: s-resize;">
+    <td><code>s-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: w-resize;">
+    <td><code>w-resize</code></td>
+    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ne-resize;">
+    <td><code>ne-resize</code></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nw-resize;">
+    <td><code>nw-resize</code></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: se-resize;">
+    <td><code>se-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: sw-resize;">
+    <td><code>sw-resize</code></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: ew-resize;">
+    <td><code>ew-resize</code></td>
+    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td rowspan="4" style="cursor: auto;">Bidirectional resize cursor.</td>
+   </tr>
+   <tr style="cursor: ns-resize;">
+    <td><code>ns-resize</code></td>
+    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: nesw-resize;">
+    <td><code>nesw-resize</code></td>
+    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+   </tr>
+   <tr style="cursor: nwse-resize;">
+    <td><code>nwse-resize</code></td>
+    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+    <th rowspan="2" scope="row" style="cursor: auto;">縮放</th>
+    <td><code>zoom-in</code></td>
+    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td rowspan="2" style="cursor: auto;">
+     <p>Something can be zoomed (magnified) in or out.</p>
+    </td>
+   </tr>
+   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+    <td><code>zoom-out</code></td>
+    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="公式語法">公式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush:css">.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+</pre>
+
+<h2 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 Basic UI', '#cursor', 'cursor')}}</td>
+   <td>{{Spec2('CSS3 Basic UI')}}</td>
+   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.cursor")}}</p>
+
+<h2 id="參照">參照</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using URL values for the cursor property">Using URL values for the cursor property</a></li>
+ <li>{{cssxref("pointer-events")}}</li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/aa358795.aspx">Cursor Property (MSDN)</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/descendant_combinator/index.html b/files/zh-tw/web/css/descendant_combinator/index.html
new file mode 100644
index 0000000000..6fe82cfc8d
--- /dev/null
+++ b/files/zh-tw/web/css/descendant_combinator/index.html
@@ -0,0 +1,121 @@
+---
+title: 後裔選擇器
+slug: Web/CSS/Descendant_combinator
+tags:
+  - CSS
+  - CSS參考
+  - Selectors
+  - 初學者
+  - 選擇器
+translation_of: Web/CSS/Descendant_combinator
+---
+<p><span class="s1">{{CSSRef("Selectors")}}</span></p>
+
+<h2 id="Summary" name="Summary">簡介</h2>
+
+<p><code>␣</code> 組合符號 (代表空白, 或更精準地說，代表一或多個空白字元) 結合了兩種選擇器，選擇了只有當第二個選擇器的目標為第一個選擇器目標的後裔時的元素，後裔選擇器跟<a href="/en/CSS/Child_selectors" title="en/CSS/Child selectors">子選擇器</a>相似，但是不要求披對的元素要是嚴格是父子關係。</p>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="eval">selector1 selector2 { <em>style properties</em> }
+</pre>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush: css">span { background-color: white; }
+div span { background-color: DodgerBlue; }
+</pre>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;span&gt;Span 1.
+    &lt;span&gt;Span 2.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+&lt;span&gt;Span 3.&lt;/span&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('Example', 200, 50) }}</p>
+
+<h2 id="Specifications">Specifications</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('CSS4 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS4 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator') }}</td>
+   <td>{{ Spec2('CSS3 Selectors') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#contextual-selectors', 'contextual selectors') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</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>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+   <td>{{ CompatVersionUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html
new file mode 100644
index 0000000000..d7c3ed1543
--- /dev/null
+++ b/files/zh-tw/web/css/grid-row/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-row
+slug: Web/CSS/grid-row
+translation_of: Web/CSS/grid-row
+---
+<h2 id="Summary">Summary </h2>
+
+<p>The <code>grid-row</code> CSS property is a <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand</a> property for {{cssxref("grid-row-start")}} and {{cssxref("grid-row-end")}} specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its {{glossary("grid areas", "grid area")}}.</p>
+
+<p>If two &lt;grid-line&gt; values are specified, the <code>grid-row-start</code> longhand is set to the value before the slash, and the <code>grid-row-end</code> longhand is set to the value after the slash.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword values */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* &lt;custom-ident&gt; values */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + &lt;integer&gt; + &lt;custom-ident&gt; values */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* Global values */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of <code>1</code>.</dd>
+ <dt><code>&lt;custom-ident&gt;</code></dt>
+ <dd>If there is a named line with the name '&lt;custom-ident&gt;-start'/'&lt;custom-ident&gt;-end', it contributes the first such line to the grid item’s placement.
+ <p class="note"><strong>Note:</strong> Named grid areas automatically generate implicit named lines of this form, so specifying <code>grid-row: foo;</code> will choose the start/end edge of that named grid area (unless another line named <code>foo-start</code>/<code>foo-end</code> was explicitly specified before it).</p>
+
+ <p>Otherwise, this is treated as if the integer <code>1</code> had been specified along with the <code>&lt;custom-ident&gt;</code>.</p>
+ </dd>
+ <dt><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?</code></dt>
+ <dd>Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
+
+ <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p>
+ </dd>
+ <dt><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]</code></dt>
+ <dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.
+ <p>If a name is given as a &lt;custom-ident&gt;, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
+
+ <p>If the &lt;integer&gt; is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="item1"&gt;&lt;/div&gt;
+  &lt;div id="item2"&gt;&lt;/div&gt;
+  &lt;div id="item3"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css; highlight[14,19]">#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+</pre>
+
+<p>{{EmbedLiveSample("Example", "200px", "200px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-row", "grid-row")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-row")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-colunms</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html
new file mode 100644
index 0000000000..31ef2b30b3
--- /dev/null
+++ b/files/zh-tw/web/css/grid-template-columns/index.html
@@ -0,0 +1,196 @@
+---
+title: 网格模板列
+slug: Web/CSS/grid-template-columns
+tags:
+  - CSS
+  - CSS網格
+  - 列子
+translation_of: Web/CSS/grid-template-columns
+---
+<h2 id="Summary">Summary</h2>
+
+<p>The <code>grid-template-columns</code> CSS property defines the line names and track sizing functions of the {{glossary("grid column", "grid columns")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* Keyword value */
+grid-template-columns: none;
+
+/* &lt;track-list&gt; values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* &lt;auto-track-list&gt; values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd>Is a keyword meaning that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-columns")}} property.</dd>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>Is a non-negative length.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Is a non-negative {{cssxref("percentage", "&lt;percentage&gt;")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as <code>auto</code>.<br>
+ The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.</dd>
+ <dt><code>&lt;flex&gt;</code></dt>
+ <dd>Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code>&lt;flex&gt;</code>-sized track takes a share of the remaining space in proportion to its flex factor.
+ <p>When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, &lt;flex&gt;)</code>).</p>
+ </dd>
+ <dt id="max-content"><code>max-content</code></dt>
+ <dd>Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>min-content</code></dt>
+ <dd>Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.</dd>
+ <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt>
+ <dd>Is a functional notation that defines a size range greater than or equal to <em>min</em> and less than or equal to <em>max</em>. If <em>max</em> is smaller than <em>min</em>, then <em>max</em> is ignored and the function is treated as <em>min</em>. As a maximum, a <code>&lt;flex&gt;</code> value sets the track’s flex factor. It is invalid as a minimum.</dd>
+ <dt id="auto"><code>auto</code></dt>
+ <dd>Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.</dd>
+ <dd>
+ <p class="note">Note: <code>auto</code> track sizes (and only <code>auto</code> track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties.</p>
+ </dd>
+ <dt id="fit-content()"><code>{{cssxref("fit-content", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}</code></dt>
+ <dd>Represents the formula <code>min(max-content, max(auto, <var>argument</var>))</code>, which is calculated similar to <code>auto</code> (i.e. <code>minmax(auto, max-content)</code>), except that the track size is clamped at <var>argument</var> if it is greater than the <code>auto</code> minimum.</dd>
+ <dt>{{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}</dt>
+ <dd>Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="grid"&gt;
+  &lt;div id="areaA"&gt;A&lt;/div&gt;
+  &lt;div id="areaB"&gt;B&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "20px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template-columns")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Grid_Tracks">Basic concepts of grid layout - Grid Tracks</a></em></li>
+ <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html
new file mode 100644
index 0000000000..9363bb9e1e
--- /dev/null
+++ b/files/zh-tw/web/css/grid-template/index.html
@@ -0,0 +1,197 @@
+---
+title: grid-template
+slug: Web/CSS/grid-template
+translation_of: Web/CSS/grid-template
+---
+<p><font><font>的</font></font><strong><code>grid-template</code></strong><font><font>CSS屬性是一個</font></font><a href="/en-US/docs/Web/CSS/Shorthand_properties"><font><font>速記屬性</font></font></a><font><font>，用於定義{{詞彙表（“網格列”，“網格列”）}}，{{詞彙表（“網格行”，“行”）}}，和{{詞彙表（“格狀區“，” area“）}}。</font></font></p>
+
+<div><font><font>{{EmbedInteractiveExample（“ pages / css / grid-template.html”）}}</font></font></div>
+
+<p class="hidden"><font><font>該交互式示例的源存儲在GitHub存儲庫中。</font><font>如果您想為交互式示例項目做出貢獻，請克隆</font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-examples</font></font></a><font><font>並向我們發送請求請求。</font></font></p>
+
+<p><font><font>作者可以為長期屬性設置值：{{cssxref（“ grid-template-rows”）}}，{{cssxref（“ grid-template-columns”）}}和{{cssxref（“ grid-template-areas “）}}。</font></font></p>
+
+<h2 id="句法"><font><font>句法</font></font></h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* Keyword value */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns values */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column values */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* Global values */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+</pre>
+
+<h3 id="價值觀"><font><font>價值觀</font></font></h3>
+
+<dl>
+ <dt><code>none</code></dt>
+ <dd><font><font>是將所有三個長期屬性設置為的關鍵字</font></font><code>none</code><font><font>，表示沒有顯式網格。</font><font>沒有命名的網格區域。</font><font>行和列將隱式生成；</font><font>它們的大小將由{{cssxref（“ grid-auto-rows”）}}和{{cssxref（“ grid-auto-columns”）}}屬性確定。</font></font></dd>
+ <dt><code>&lt;'grid-template-rows'&gt; / &lt;'grid-template-columns'&gt;</code></dt>
+ <dd><font><font>將{{cssxref（“ grid-template-rows”）}}和{{cssxref（“ grid-template-columns”）}}設置為指定值，並設置{{cssxref（“ grid-template-areas”）} }至</font></font><code>none</code><font><font>。</font></font></dd>
+ <dt><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ / &lt;explicit-track-list&gt; ]?</code></dt>
+ <dd>Sets {{cssxref("grid-template-areas")}} to the strings listed, {{cssxref("grid-template-rows")}} to the track sizes following each string (filling in <code>auto</code> for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref("grid-template-columns")}} to the track listing specified after the slash (or <code>none</code>, if not specified).<br>
+
+ <p class="note">Note: The {{cssxref("repeat")}} function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ASCII art”.</p>
+ </dd>
+</dl>
+
+<p class="note"><strong>Note:</strong> The {{cssxref("grid")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use <code>grid</code> (as opposed to <code>grid-template</code>) to prevent these values from cascading in seperately.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css; highlight[5-8] notranslate">#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-area: foot;
+}</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush:html notranslate">&lt;section id="page"&gt;
+  &lt;header&gt;Header&lt;/header&gt;
+  &lt;nav&gt;Navigation&lt;/nav&gt;
+  &lt;main&gt;Main area&lt;/main&gt;
+  &lt;footer&gt;Footer&lt;/footer&gt;
+&lt;/section&gt;</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</p>
+
+<h2 id="Specifications">Specifications</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 Grid", "#propdef-grid-template", "grid-template")}}</td>
+   <td>{{Spec2("CSS3 Grid")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.grid-template")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
+ <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
+ <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
+</ul>
+
+<section class="Quick_links" id="Quick_Links">
+<ol>
+ <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
+ <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
+   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns"><font><font>網格自動列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow"><font><font>網格自動流</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows"><font><font>網格自動行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column"><font><font>網格列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-end"><font><font>網格列端</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-gap"><font><font>網格列間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-column-start"><font><font>網格列開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-gap"><font><font>網格間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-end"><font><font>網格行尾</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-gap"><font><font>網格行間隙</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-row-start"><font><font>網格行開始</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template"><font><font>網格模板</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-areas"><font><font>網格模板區域</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-columns"><font><font>網格模板列</font></font></a></li>
+   <li><a href="/en-US/docs/Web/CSS/grid-template-rows"><font><font>網格模板行</font></font></a></li>
+  </ol>
+ </li>
+ <li data-default-state="open"><a href="#"><strong><font><font>詞彙表</font></font></strong></a>
+  <ol>
+   <li><a href="/en-US/docs/Glossary/Grid_lines"><font><font>網格線</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_tracks"><font><font>網格軌道</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_cell"><font><font>網格單元</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_areas"><font><font>網格區域</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Gutters"><font><font>天溝</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_rows"><font><font>網格行</font></font></a></li>
+   <li><a href="/en-US/docs/Glossary/Grid_column"><font><font>網格列</font></font></a></li>
+  </ol>
+ </li>
+</ol>
+</section>
diff --git a/files/zh-tw/web/css/height/index.html b/files/zh-tw/web/css/height/index.html
new file mode 100644
index 0000000000..139ec496b6
--- /dev/null
+++ b/files/zh-tw/web/css/height/index.html
@@ -0,0 +1,234 @@
+---
+title: height
+slug: Web/CSS/height
+translation_of: Web/CSS/height
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="概要">概要</h2>
+
+<p><strong><code>高度(height)</code></strong> 的 CSS 屬性指定了元素內容區域的高度。<a href="/en-US/docs/CSS/box_model#content">content area</a> 在元素的留白(padding)、邊框(border) 與 邊界(margin) 內。</p>
+
+<p>{{cssxref("min-height")}} 與 {{cssxref("max-height")}} 的特性比 {{Cssxref("height")}} 更重要。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css">/* Keyword value */
+height: auto;
+
+/* &lt;length&gt; values */
+height: 120px;
+height: 10em;
+
+/* &lt;percentage&gt; value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;length&gt;</code></dt>
+ <dd>查看 {{cssxref("&lt;length&gt;")}} 可用的單位。</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>{{cssxref("&lt;percentage&gt;")}} 相對於元素的塊狀高度。如果沒有指定塊狀元素的高度，預設值為 <code>auto。</code>用在 root 元素 (e.g. <code>&lt;html&gt;</code>) 上是相對於初始塊狀元素（即顯示器的尺寸）。</dd>
+ <dt><code>border-box </code>{{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's border box.</dd>
+ <dt><code>content-box</code> {{experimental_inline}}</dt>
+ <dd>{{cssxref("&lt;length&gt;")}} 或 {{cssxref("&lt;percentage&gt;")}} 是應用於元素的 content box.</dd>
+ <dt><code>auto</code></dt>
+ <dd>瀏覽器將計算並選擇指定元素的高度。</dd>
+ <dt>fill {{experimental_inline}}</dt>
+ <dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd>
+ <dt><code>max-content</code> {{experimental_inline}}</dt>
+ <dd>The intrinsic preferred height.</dd>
+ <dt><code>min-content</code> {{experimental_inline}}</dt>
+ <dd>The intrinsic minimum height.</dd>
+ <dt><code>available</code> {{experimental_inline}}</dt>
+ <dd>The containing block height minus vertical margin, border and padding.</dd>
+ <dt><code>fit-content</code> {{experimental_inline}}</dt>
+ <dd>The larger of:
+ <ul>
+  <li>the intrinsic minimum height</li>
+  <li>the smaller of the intrinsic preferred height and the available height</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="red"&gt;
+  &lt;span&gt;I'm 50 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="green"&gt;
+  &lt;span&gt;I'm 25 pixels tall.&lt;/span&gt;
+&lt;/div&gt;
+&lt;div id="parent"&gt;
+  &lt;div id="child"&gt;
+    &lt;span&gt;I'm half the height of my parent.&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+</pre>
+
+<p>{{EmbedLiveSample('Example')}}</p>
+
+<h2 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 Box', '#the-width-and-height-properties', 'height')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Lists <code>height</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Adds support for the {{cssxref("&lt;length&gt;")}} values and precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Adds new sizing keywords for width and height.</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>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>7.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>fill</code>, <code>fit-content</code>, <code>min-content</code>, <code>max-content</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(46.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td> </td>
+   <td>{{CompatChrome(46.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/box_model">box model</a>, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/ime-mode/index.html b/files/zh-tw/web/css/ime-mode/index.html
new file mode 100644
index 0000000000..a487af23e0
--- /dev/null
+++ b/files/zh-tw/web/css/ime-mode/index.html
@@ -0,0 +1,56 @@
+---
+title: ime-mode
+slug: Web/CSS/ime-mode
+tags:
+  - CSS
+translation_of: Web/CSS/ime-mode
+---
+<p> {{ CSSRef() }}
+{{ Fx_minversion_header(3) }}
+</p>
+<h3 id=".E6.91.98.E8.A6.81" name=".E6.91.98.E8.A6.81"> 摘要 </h3>
+<p><code>ime-mode</code> 特性可用以控制某文字輸入欄位的輸入法狀態。
+</p>
+<ul><li> {{ Xref_cssinitial() }}：{{ Cssxref("auto") }}
+</li><li> 適用範圍：文字輸入欄位
+</li><li> {{ Xref_cssinherited() }}: 不繼承
+</li><li> 是否可標百分比：N/A
+</li><li> 適用媒體：{{ Xref_cssvisual() }}
+</li><li> {{ Xref_csscomputed() }}：
+</li></ul>
+<h3 id=".E8.AA.9E.E6.B3.95" name=".E8.AA.9E.E6.B3.95"> 語法 </h3>
+<pre class="eval">ime-mode: &lt;mode&gt;
+</pre>
+<h3 id=".E7.89.B9.E6.80.A7.E5.80.BC" name=".E7.89.B9.E6.80.A7.E5.80.BC"> 特性值 </h3>
+<dl><dt> <code>auto</code></dt><dd> 不改變輸入法狀態，此為預設值。
+</dd><dt> <code>normal</code></dt><dd> 輸入法設為一般狀態，使用者可在自訂樣式表中蓋過網頁的設定。<i>Internet Explorer 不支援此值。</i>
+</dd><dt> <code>active</code></dt><dd> 輸入法設為啟用狀態。除非使用者刻意關閉、否則此文字欄位將使用輸入法工具。<i>Linux 不支援此值。</i>
+</dd><dt> <code>inactive</code></dt><dd> 輸入法設為關閉狀態，但使用者仍可另行啟用。<i>Linux 不支援此值。</i>
+</dd><dt> <code>disabled</code></dt><dd> 輸入法設為停用狀態，在此欄位中使用者亦無法將其啟用。
+</dd></dl>
+<h3 id=".E7.AF.84.E4.BE.8B" name=".E7.AF.84.E4.BE.8B"> 範例 </h3>
+<pre>&lt;input type="text" name="name" value="initial value" style="ime-mode: disabled"&gt;
+</pre>
+<p>此範例在輸入欄位中設定為停用輸入法，在後端資料庫不支援擴充字元集、卻必須讓使用者自行輸入文字時，可以使用。
+</p>
+<h3 id=".E5.82.99.E8.A8.BB" name=".E5.82.99.E8.A8.BB"> 備註 </h3>
+<p>與 Internet Explorer 不同的地方是，Firefox 實作 <code>ime-mode</code> 時亦允許此特性套用至密碼輸入欄位，但這在理想的使用體驗上有不妥之處、而密碼欄位也應該停用輸入法。若有網站執意將不適切的行為套用至密碼欄位，則使用者可以在自訂 CSS 檔中加上下列設定以強迫調整此功能：
+</p>
+<pre>input[type=password] {
+	ime-mode: auto !important;
+}
+</pre>
+<p>{{ Note("一般說來，公開的網站不該自行調整輸入法模式的行為。這個特性主要是給網際應用程式使用的。") }}
+</p><p>Mac 版的 Gecko 1.9 中，若某欄位設定停用輸入法，則自該欄位移開輸入焦點時並無法自行恢復輸入法狀態，所以若使用 <code>disabled</code> 值，Mac 的使用者可能會碰上麻煩。
+</p><p>{{ Note("別僅僅仰賴停用輸入法的招術來避免使用者輸入擴充字元，因為即使輸入法被停用，使用者依然可自他處剪下擴充字元後貼到表單欄位中。") }}
+</p>
+<h3 id=".E8.A6.8F.E6.A0.BC.E5.87.BA.E8.99.95" name=".E8.A6.8F.E6.A0.BC.E5.87.BA.E8.99.95"> 規格出處 </h3>
+<ul><li> <a class="external" href="http://msdn2.microsoft.com/en-us/library/ms533883.aspx">微軟規格</a>
+</li></ul>
+<h3 id=".E7.80.8F.E8.A6.BD.E5.99.A8.E7.9B.B8.E5.AE.B9.E6.80.A7" name=".E7.80.8F.E8.A6.BD.E5.99.A8.E7.9B.B8.E5.AE.B9.E6.80.A7"> 瀏覽器相容性 </h3>
+<p>Firefox 3 以後便能同 Internet Explorer 一般支援 <code>ime-mode</code> 特性。
+</p><p><br>
+</p>
+<div class="noinclude">
+</div>
+{{ languages( { "en": "en/CSS/ime-mode", "es": "es/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode" } ) }}
diff --git a/files/zh-tw/web/css/index.html b/files/zh-tw/web/css/index.html
new file mode 100644
index 0000000000..f894fc2d6a
--- /dev/null
+++ b/files/zh-tw/web/css/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Cascading Style Sheets
+  - Design
+  - Landing
+  - Layout
+  - Reference
+  - Style Sheets
+  - Styles
+  - Stylesheets
+  - 樣式表
+  - 版面配置
+  - 設計
+translation_of: Web/CSS
+---
+<p class="summary"><span class="seosummary="><strong>層疊樣式表（Cascading Style Sheets, CSS）</strong>是用來描述 <a href="/zh-TW/docs/HTML" title="HyperText Markup Language">HTML</a> 或 <a href="/zh-TW/docs/XML" title="zh-TW/docs/XML">XML</a>（包含 <a href="/zh-TW/docs/SVG" title="zh-TW/docs/SVG">SVG</a> 或 <a href="/zh-TW/docs/XHTML" title="zh-TW/docs/XHTML">XHTML</a> 等各種 XML 變形）文件外觀的<a href="/zh-TW/docs/DOM/stylesheet">樣式表</a>語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。</span></p>
+
+<p><strong>CSS</strong> 是<strong>開放網路</strong>的核心語言之一，具有標準化的 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 規範</a>。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 <a href="/zh-TW/docs/CSS/CSS3" title="CSS3">CSS3</a> 目前被分作數個較小的模組，持續在標準化的路上行進。</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS 介紹</span>
+
+  <p>若你剛接觸網路開發，請確定讀過我們的 <a href="/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS 基礎</a>以了解何謂 CSS 並知道要怎麼用。</p>
+ </li>
+ <li><span>CSS 教學</span>
+  <p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>包含所有必要的基礎資訊，能讓你從完全新手開始，帶向熟悉 CSS。</p>
+ </li>
+ <li><span>CSS 參考</span>
+  <p>這是給經驗豐富的網頁開發者的<a href="/zh-TW/docs/Web/CSS/Reference" title="zh-TW/docs/CSS/CSS_Reference">完整參考資訊</a>，說明 CSS 的每一個屬性與概念。</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="教學">教學</h2>
+
+<p>我們的 <a href="/zh-TW/docs/Learn/CSS">CSS 學習專區</a>有很多從頭教起的 CSS 模組。你不需要背景知識。</p>
+
+<dl>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Introduction_to_CSS">CSS 介紹</a></dt>
+ <dd>此模組讓你理解 CSS 工作原理，包含選擇器與屬性、撰寫 CSS 規則、在 HTML 套用 CSS、如何在 CSS 指定長度、色彩、還有其它單位、階層與繼承、box model 基礎、以及針對 CSS 除錯。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_text">文字樣式</a></dt>
+ <dd>在這裡我們專注在文字樣式的基礎，包含設定字體、粗細、斜體、行距、字距、陰影以及其他文字屬性。最後以應用自訂字體、樣式化列表、樣式化連結結束。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/Styling_boxes">樣式化盒子</a></dt>
+ <dd>接著，我們關注樣式化盒子，這是網頁排版中一個基礎的環節。在這個系列中我們會複習盒子模型，然後操作盒子的排版，像是設定留白、邊框、邊距、背景顏色或圖片以及其他特色，還有一些酷炫的功能像是陰影、過濾器。</dd>
+ <dt><a href="/zh-TW/docs/Learn/CSS/CSS_layout">CSS 排版</a></dt>
+ <dd>到了這裡，我們已經看完 CSS 的基礎（樣式化文字、樣式化與操作盒子使你的內容可以合適的展示）。<span class="not-sure">現在該來看看如何把你的盒子放在相對於可視區正確的地方。我們已經擁有必要的知識，所以你可以更深入了解 CSS 排版、看不同的顯示設定、傳統排版方法如浮動或定位、新的排版方法如彈性盒子。</span></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Tools" id="參考">參考</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/Reference">CSS 參考</a>：一個詳細的參考資料，為資深網頁開發人員設計，包含 CSS 各種屬性和觀念。</li>
+ <li>CSS 關鍵概念：
+  <ul>
+   <li><a href="/zh-TW/docs/CSS/Syntax">語法</a></li>
+   <li><a href="/zh-TW/docs/CSS/Specificity">權重</a>和<a href="/zh-TW/docs/CSS/inheritance">繼承</a></li>
+   <li><a href="/zh-TW/docs/CSS/box_model">盒子模型</a>和<a href="/zh-TW/docs/CSS/margin_collapsing">邊框的崩潰</a></li>
+   <li><a href="/zh-TW/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">堆疊</a>和<a href="/zh-TW/docs/CSS/block_formatting_context" title="block formatting context">格式化區塊</a></li>
+   <li><a href="/zh-TW/docs/CSS/initial_value">初始值</a> 、<a href="/zh-TW/docs/CSS/computed_value">計算值（computed）</a>、 <a href="/zh-TW/docs/CSS/used_value">使用值（used）</a>和<a href="/zh-TW/docs/CSS/actual_value">運作值</a></li>
+   <li><a href="/zh-TW/docs/CSS/Shorthand_properties">CSS 簡寫屬性</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 彈性盒子排版</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線排版</a></li>
+   <li><a href="/zh-TW/docs/Web/CSS/Media_Queries">媒體查詢</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 class="Tools" id="CSS_開發工具">CSS 開發工具</h2>
+
+<ul>
+ <li>The <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS 驗證服務</a> 能檢查 CSS 的有效性。<a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> 也在做相同的事情。它們都是很重要的除錯工具。</li>
+ <li><a href="/zh-TW/docs/Tools">Firefox 開發者工具</a>能透過<a href="/zh-TW/docs/Tools/Page_Inspector">頁面檢測器</a>與<a href="/zh-TW/docs/Tools/Style_Editor">樣式編輯器</a>直接觀察、編輯網頁的 CSS。</li>
+ <li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/1843">Firebug 套件</a>，navigator 裡面，能直接觀察、編輯網頁的 CSS 的人氣套件。要測試某些變化的時候會非常實用，而這套件還能做得更多。</li>
+ <li>Firefox 的<a class="link-https" href="https://addons.mozilla.org/zh-TW/firefox/addon/60">Web Developer 套件</a> 也能能直接觀察、編輯網頁的 CSS。與 Firebug 相比更簡單、但相比下也沒那麼強大。</li>
+ <li><a href="/zh-TW/docs/Web/CSS/Tools">其他 CSS 工具。</a></li>
+</ul>
+
+<h2 id="Meta_錯誤">Meta 錯誤</h2>
+
+<ul>
+ <li>Firefox: {{bug(1323667)}}</li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/Demos_of_open_web_technologies#CSS">CSS demos</a> 最新的 CSS 技術動向：給予創意的一拔。</li>
+ <li>常與 CSS 相關聯的語言：<a href="/zh-TW/docs/HTML">HTML</a>、<a href="/zh-TW/docs/SVG">SVG</a>、<a href="/zh-TW/docs/XHTML">XHTML</a>、<a href="/zh-TW/docs/XML">XML</a>。</li>
+ <li>廣泛運用 CSS 的 Mozilla 科技：<a href="/zh-TW/Firefox">Firefox</a> 及 <a href="/zh-TW/docs/Mozilla/Thunderbird">Thunderbird</a> 的<a href="/zh-TW/docs/Extensions">套件</a>與<a href="/zh-TW/Add-ons/Themes">佈景</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/inheritance/index.html b/files/zh-tw/web/css/inheritance/index.html
new file mode 100644
index 0000000000..f67ad62107
--- /dev/null
+++ b/files/zh-tw/web/css/inheritance/index.html
@@ -0,0 +1,48 @@
+---
+title: 繼承
+slug: Web/CSS/inheritance
+translation_of: Web/CSS/inheritance
+---
+<h2 id="摘要">摘要</h2>
+
+<p>每個 <a href="/en-US/docs/CSS/CSS_Reference" title="en/CSS_Reference">CSS property definition</a> 都寫道是否這個屬性預設有繼承: ("Inherited: Yes") 或是 預設沒有繼承: ("Inherited: no"). 這個設定將會在沒有位屬性標註值時發生.</p>
+
+<h2 id="Inherited_properties" name="Inherited_properties">繼承屬性</h2>
+
+<p>When no value for an <strong>inherited property</strong> has been specified on an element, the element gets the <a href="/en-US/docs/CSS/computed_value" title="en/CSS/computed_value">computed value</a> of that property on its parent element. Only the root element of the document gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> given in the property's summary.</p>
+
+<p>A typical example of an inherited property is the {{ Cssxref("color") }} property. Given the style rules:</p>
+
+<pre class="brush: css">p { color: green }</pre>
+
+<p>HTML:</p>
+
+<pre class="brush: html">&lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p>the words "emphasized text" will appear green, since the <code>em</code> element has inherited the value of the {{ Cssxref("color") }} property from the <code>p</code> element. It does <em>not</em> get the initial value of the property (which is the color that is used for the root element when the page specifies no color).</p>
+
+<h2 id="Non-inherited_properties" name="Non-inherited_properties">非繼承屬性</h2>
+
+<p>When no value for an <strong>non-inherited property</strong> (sometimes called a <strong>reset property</strong> in Mozilla code) has been specified on an element, the element gets the <a href="/en-US/docs/CSS/initial_value" title="en/CSS/initial_value">initial value</a> of that property (as specified in the property's summary).</p>
+
+<p>A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Given the style rules:</p>
+
+<pre class="brush: css"> p { border: medium solid }</pre>
+
+<p>HTML:</p>
+
+<pre class="brush: html">  &lt;p&gt;This paragraph has &lt;em&gt;emphasized text&lt;/em&gt; in it.&lt;/p&gt;</pre>
+
+<p>the words "emphasized text" will not have a border (since the initial value of {{ Cssxref("border-style") }} is <code>none</code>).</p>
+
+<h2 id="Notes" name="Notes">註</h2>
+
+<p>{{ Cssxref("inherit") }} 關鍵字允許作者準確地去標註. 這個在繼承和非繼承屬性都是有效的.</p>
+
+<h2 id="See_Also" name="See_Also">參見</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>{{ CSS_key_concepts() }}</li>
+ <li>{{ Cssxref("inherit") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/line-break/index.html b/files/zh-tw/web/css/line-break/index.html
new file mode 100644
index 0000000000..f7e073e100
--- /dev/null
+++ b/files/zh-tw/web/css/line-break/index.html
@@ -0,0 +1,71 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+translation_of: Web/CSS/line-break
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>line-break</code></strong> CSS 屬性能夠設定在中文、日文和韓文(CJK) 的文字中，遇到標點或符號時該如何斷行。</p>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* Global values */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+</pre>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>以預設的斷行規則斷開文字。</dd>
+ <dt><code>loose</code></dt>
+ <dd>Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.</dd>
+ <dt><code>normal</code></dt>
+ <dd>Break text using the most common line break rule.</dd>
+ <dt><code>strict</code></dt>
+ <dd>Break text using the most stringent line break rule.</dd>
+ <dt><code>anywhere</code> </dt>
+ <dd>
+ <p>There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.</p>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Specifications">Specifications</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 Text', '#line-break-property', 'line-break')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.line-break")}}</p>
diff --git a/files/zh-tw/web/css/media_queries/index.html b/files/zh-tw/web/css/media_queries/index.html
new file mode 100644
index 0000000000..41339e07bc
--- /dev/null
+++ b/files/zh-tw/web/css/media_queries/index.html
@@ -0,0 +1,112 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+translation_of: Web/CSS/Media_Queries
+---
+<div>{{CSSRef}}</div>
+
+<p><strong>Media Queries</strong> is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.</p>
+
+<h2 id="參考">參考</h2>
+
+<h3 id="At-rules">At-rules</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("@import")}}</li>
+ <li>{{cssxref("@media")}}</li>
+</ul>
+</div>
+
+<h2 id="指南">指南</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Using media queries</a></dt>
+ <dd>Presents what media queries are doing and explains the possible expressions.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a></dt>
+ <dd>Explains how to test a media query programmatically, from JavaScript.</dd>
+</dl>
+
+<h2 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 Conditional')}}</td>
+   <td>{{Spec2('CSS3 Conditional')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Media Queries')}}</td>
+   <td>{{Spec2('CSS4 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Media Queries')}}</td>
+   <td>{{Spec2('CSS3 Media Queries')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'media.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</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>1.0</td>
+   <td>{{CompatGeckoDesktop(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.2</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.7)}}</td>
+   <td>9.0</td>
+   <td>9.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-tw/web/css/media_queries/testing_media_queries/index.html b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html
new file mode 100644
index 0000000000..5c61c6483f
--- /dev/null
+++ b/files/zh-tw/web/css/media_queries/testing_media_queries/index.html
@@ -0,0 +1,118 @@
+---
+title: 測試 media queries
+slug: Web/CSS/Media_Queries/Testing_media_queries
+translation_of: Web/CSS/Media_Queries/Testing_media_queries
+---
+<p>{{SeeCompatTable}}</p>
+
+<p>DOM 提供了一個用程式去測試 media query 的方法：那就是透過 {{domxref("MediaQueryList") }} 物件；透過 <span style="line-height: 19.0909080505371px;">{{domxref("MediaQueryList") }} 物件上的屬性和方法，我們可以得知、觀察目前 media query 的狀態。</span></p>
+
+<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">創建 media query list 物件</h2>
+
+<p>透過傳入目標 medai query 到 {{domxref("window.matchMedia") }} 方法，我們將可以取得相對應的 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件。</span></p>
+
+<p>以下範例將取得偵測螢幕方向的 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件：</span></p>
+
+<pre>var mql = window.matchMedia("(orientation: portrait)");
+</pre>
+
+<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">檢查 media query 結果</h2>
+
+<p>讀取 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件 的 matches 屬性就可以得知測試結果：</span></p>
+
+<pre class="brush: js">if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+</pre>
+
+<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">接收測試結果通知</h2>
+
+<p>當我們想要動態依據 media query 測試狀況執行對應處理，除了持續定期偵測外，還有一個更有效率的途徑：那就是註冊 media query 的事件處理器 (listener)。只要呼叫 <span style="line-height: 19.0909080505371px;">MediaQueryList 物件上 addListener 方法，傳入符合</span> {{domxref("MediaQueryListListener") }} 介面的 listener 便完成事件註冊<span style="line-height: 19.0909080505371px;">：</span></p>
+
+<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+</pre>
+
+<p>上面我們替螢幕方向 media query 註冊了一個 listener。請注意，在第一次註冊後，listener 會立刻被呼叫一次，這是為了初始化準備，因為我們可能預設 UI 是針對 'portait' 模式，但目前卻是 'landscape' 模式，所以這個第一次呼叫將給予我們作初始化調整的空間。</p>
+
+<p><code>下面handleOrientationChange()</code> 方法便是我們針對螢幕方向變化的 listener<span style="line-height: 19.0909080505371px;">：</span></p>
+
+<pre class="brush: js">function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+</pre>
+
+<h2 id="Ending_query_notifications" name="Ending_query_notifications">停止接收測試結果通知</h2>
+
+<p>當我們不需要接受通知時，只需要呼叫 removeListener 方法，然後傳入欲移除的 listener 即可：</p>
+
+<pre>mql.removeListener(handleOrientationChange);
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</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>9</td>
+   <td>{{CompatGeckoDesktop("6.0") }}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>3.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10</td>
+   <td>12.1</td>
+   <td>5</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also"> </h2>
+
+<h2 id="See_also" name="See_also">延伸閱讀</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
+ <li>{{domxref("window.matchMedia()") }}</li>
+ <li>{{domxref("MediaQueryList") }}</li>
+ <li>{{domxref("MediaQueryListListener") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/object-fit/index.html b/files/zh-tw/web/css/object-fit/index.html
new file mode 100644
index 0000000000..e6b73dc0b9
--- /dev/null
+++ b/files/zh-tw/web/css/object-fit/index.html
@@ -0,0 +1,217 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+translation_of: Web/CSS/object-fit
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">Summary</h2>
+
+<p>The <strong><code>object-fit</code></strong> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.</p>
+
+<p>物件契合(<strong><code>object-fit)</code></strong>CSS屬性能指定置換元素(replaced element)的內容要如何契合、安裝到其使用的高度和寬度已確定的框。</p>
+
+<p> </p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+
+<pre class="brush:css">/* Keyword values */
+object-fit: fill;
+object-fit: contain;
+object-fit: cover;
+object-fit: none;
+object-fit: scale-down;
+
+/* Global values */
+object-fit: inherit;
+object-fit: initial;
+object-fit: unset;
+</pre>
+
+<h3 id="Values" name="Values">Values</h3>
+
+<dl>
+ <dt><code>fill</code></dt>
+ <dd>The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.</dd>
+ <dt><code>contain</code></dt>
+ <dd>The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.</dd>
+ <dt><code>cover</code></dt>
+ <dd>The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.</dd>
+ <dt><code>none</code></dt>
+ <dd>The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.</dd>
+ <dt><code>scale-down</code></dt>
+ <dd>The content is sized as if <code>none</code> or <code>contain</code> were specified, whichever would result in a smaller concrete object size.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+
+  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+
+  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+
+  &lt;h2&gt;object-fit: none&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+
+  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+
+  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+
+&lt;/div&gt;</pre>
+
+<h3 id="CSS_Content">CSS Content</h3>
+
+<pre class="brush: css">h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+</pre>
+
+<h3 id="Output">Output</h3>
+
+<p>{{ EmbedLiveSample('Example', 500, 450) }}</p>
+
+<h2 id="Specifications" name="Specifications">Specifications</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('CSS4 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS4 Images')}}</td>
+   <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</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>31.0</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.60{{ property_prefix("-o") }}<br>
+    19.0</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>4.4.4</td>
+   <td>{{ CompatGeckoDesktop("36") }}</td>
+   <td>{{CompatNo}}</td>
+   <td>11.5{{ property_prefix("-o") }}<br>
+    24</td>
+   <td>{{ CompatVersionUnknown }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li>Other image-related CSS properties: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/css/pseudo-classes/index.html b/files/zh-tw/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..1a222e59cd
--- /dev/null
+++ b/files/zh-tw/web/css/pseudo-classes/index.html
@@ -0,0 +1,129 @@
+---
+title: 虛擬類別
+slug: Web/CSS/Pseudo-classes
+translation_of: Web/CSS/Pseudo-classes
+---
+<p>{{ CSSRef() }}</p>
+
+<p>CSS <strong><em><dfn>虛擬類別（pseudo-class）</dfn></em></strong>的元素，在特殊狀態下被選取的話，會作為關鍵字被加到選擇器裡面。例如 {{ Cssxref(":hover") }} 會讓用戶的滑鼠停在某個元素的時候，套用指定選擇器的樣式。</p>
+
+<p>虛擬類別與 {{ Cssxref("pseudo-elements") }} 能讓你不只能給文件樹（document tree）本身的相關內容套用樣式，還能給諸如瀏覽歷史（{{ cssxref(":visited") }}）、內容的狀態（{{ cssxref(":checked") }}）、還有滑鼠的位置（像 {{ cssxref(":hover") }} 就能讓偵測滑鼠是否在元件上）之類的外部相關因素套用樣式。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">selector:pseudo-class {
+  property: value;
+}
+</pre>
+
+<h2 id="基本虛擬類別的目錄">基本虛擬類別的目錄</h2>
+
+<div class="index">
+<ul>
+ <li>{{ Cssxref(":active") }}</li>
+ <li>{{ cssxref(':any')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h2 id="規範"><span>規範</span></h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Fullscreen') }}</td>
+   <td>{{ Spec2('Fullscreen') }}</td>
+   <td>定義 <code>:fullscreen</code>。</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML WHATWG') }}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>在 {{ SpecName('HTML5 W3C') }} 並沒有改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>定義 <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code>, and <code>:matches()</code>.<br>
+    沒有針對 {{SpecName('CSS3 Selectors')}} 與 {{SpecName('HTML5 W3C')}} 虛擬類別的重大更改（though semantic meaning not taken over）</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('HTML5 W3C') }}</td>
+   <td>{{ Spec2('HTML5 W3C') }}</td>
+   <td>定義以下 HTML context 的語意含義： <code>:link</code>, <code>:visited</code>, <code>:active</code>, <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, and <code>:indeterminate</code>.<br>
+    <code>定義 :default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>, and <code>:dir()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS3 Basic UI') }}</td>
+   <td>{{ Spec2('CSS3 Basic UI') }}</td>
+   <td>定義 <code>:default</code>, <code>:valid</code>, <code>:invalid</code>, <code>:in-range</code>, <code>:out-of-range</code>, <code>:required</code>, <code>:optional</code>, <code>:read-only</code>, <code>:read-write</code>，但沒有語意含義的定義。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>定義 <code>:target</code>, <code>:root</code>, <code>:nth-child()</code>, <code>:nth-last-of-child()</code>, <code>:nth-of-type()</code>, <code>:nth-last-of-type()</code>, <code>:last-child</code>, <code>:first-of-type</code>, <code>:last-of-type</code>, <code>:only-child</code>, <code>:only-of-type</code>, <code>:empty</code>, <code>:not()</code>.<br>
+    定義 <code>:enabled</code>, <code>:disabled</code>, <code>:checked</code>, <code>:indeterminate</code> 的語法，但沒有語意含義的定義。<br>
+    在 {{SpecName('CSS2.1')}} 並沒有明顯改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>定義 <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code>, <code>:focus</code>.<br>
+    在 {{SpecName('CSS1')}} 並沒有明顯改變。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>定義 <code>:link</code>, <code>:visited</code>, <code>:active</code>，但沒有語意含義的定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="參閱">參閱</h2>
+
+<ul>
+ <li>{{ Cssxref("pseudo-elements") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/radial-gradient()/index.html b/files/zh-tw/web/css/radial-gradient()/index.html
new file mode 100644
index 0000000000..bd054abab3
--- /dev/null
+++ b/files/zh-tw/web/css/radial-gradient()/index.html
@@ -0,0 +1,183 @@
+---
+title: radial-gradient()
+slug: Web/CSS/radial-gradient()
+translation_of: Web/CSS/radial-gradient()
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/gradient" title="The &lt;gradient> CSS data type is a special type of &lt;image> that consists of a progressive transition between two or more colors."><code>&lt;gradient&gt;</code></a>數據類型的物件，其是 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image" title="The &lt;image> CSS data type represents a two-dimensional image. There are two kinds of images: plain images, referenced with a &lt;url>, and dynamically-generated images, generated with &lt;gradient> or element(). Additional CSS image functions include image(), image-set(), and cross-fade(). Images can be used with numerous CSS properties, such as background-image, border-image, content, cursor, and list-style-image."><code>&lt;image&gt;</code></a> 的一種。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<p>As with any gradient, a radial gradient has <a href="/en-US/docs/CSS/image#no_intrinsic">no intrinsic dimensions</a>; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.</p>
+
+<p>To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.</p>
+
+<p>Because <code>&lt;gradient&gt;</code>s belong to the <code>&lt;image&gt;</code> data type, they can only be used where <code>&lt;image&gt;</code>s can be used. For this reason, <code>radial-gradient()</code> won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("&lt;color&gt;")}} data type.</p>
+
+<h2 id="Composition_of_a_radial_gradient">Composition of a radial gradient</h2>
+
+<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。</p>
+
+<p>To create a smooth gradient, the <code>radial-gradient()</code> function draws a series of concentric shapes radiating out from the center to the <em>ending shape</em> (and potentially beyond). The ending shape may be either a circle or an ellipse.</p>
+
+<p>Color-stop points are positioned on a <em>virtual gradient ray</em> that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents <code>100%</code>. Each shape is a single color determined by the color on the gradient ray it intersects.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;position&gt;")}}</dt>
+ <dd>The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to <code>center</code>.</dd>
+ <dt><code>&lt;shape&gt;</code></dt>
+ <dd>The gradient's shape. The value can be <code>circle</code> (meaning that the gradient's shape is a circle with constant radius) or <code>ellipse</code> (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to <code>ellipse</code>.</dd>
+ <dt><code>&lt;extent-keyword&gt;</code></dt>
+ <dd>A keyword describing how big the ending shape must be. The possible values are:
+ <table class="standard-table">
+  <thead>
+   <tr>
+    <th>Keyword</th>
+    <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+    <td><code>closest-side</code></td>
+    <td>The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).</td>
+   </tr>
+   <tr>
+    <td><code>closest-corner</code></td>
+    <td>The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.</td>
+   </tr>
+   <tr>
+    <td><code>farthest-side</code></td>
+    <td>Similar to <code>closest-side</code>, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).</td>
+   </tr>
+   <tr>
+    <td><code>farthest-corner</code></td>
+    <td>The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.</td>
+   </tr>
+  </tbody>
+ </table>
+
+ <div class="note">
+ <p><strong>Note:</strong> Early implementations of this function included other keywords (<code>cover</code> and <code>contain</code>) as synonyms of the standard <code>farthest-corner</code> and <code>closest-side</code>, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.</p>
+ </div>
+ </dd>
+ <dt><code>&lt;linear-color-stop&gt;</code></dt>
+ <dd>A color-stop's {{cssxref("&lt;color&gt;")}} value, followed by an one or two optional stop positions (either a {{cssxref("&lt;percentage&gt;")}} or a {{cssxref("&lt;length&gt;")}} along the gradient's axis). A percentage of <code>0%</code>, or a length of <code>0</code>, represents the center of the gradient; the value <code>100%</code> represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.</dd>
+ <dt><code>&lt;color-hint&gt;</code></dt>
+ <dd>Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">radial-gradient(
+  [ [ circle || <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> ]                         [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ ellipse || [ <a href="/en-US/docs/CSS/length">&lt;length&gt;</a> | <a href="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a> ]{2} ]  [ at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    [ [ circle | ellipse ] || &lt;extent-keyword&gt; ] [at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ]? , |
+    at <a href="/en-US/docs/CSS/position_value">&lt;position&gt;</a> ,
+  ]?
+  &lt;color-stop-list&gt; [ , &lt;color-stop-list&gt; ]+
+)
+where &lt;extent-keyword&gt; = closest-corner | closest-side | farthest-corner | farthest-side
+   and &lt;color-stop-list&gt; = [ &lt;linear-color-stop&gt; [, &lt;color-hint&gt;? ]? ]#, &lt;linear-color-stop&gt;
+   and &lt;linear-color-stop&gt; = &lt;color&gt; [ &lt;color-stop-length&gt; ]?
+   and &lt;color-stop-length&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]{1,2}
+   and &lt;color-hint&gt; = [ &lt;percentage&gt; | &lt;length&gt; ]
+</pre>
+
+<div class="blockIndicator warning">
+<p>Note that negative <code>&lt;length&gt;</code>'s are not allowed, however browsers had implemented negative lengths which are now being removed. <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/css-radial-gradients-no-longer-accept-negative-radii/">See the Firefox site compat note</a>.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Simple_gradient">Simple gradient</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+} </pre>
+
+<p>{{EmbedLiveSample('Simple_gradient', 120, 120)}}</p>
+
+<h3 id="Non-centered_gradient">Non-centered gradient</h3>
+
+<div class="hidden">
+<pre class="brush: html notranslate">&lt;div class="radial-gradient"&gt;&lt;/div&gt;
+</pre>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  width: 240px;
+  height: 120px;
+}</pre>
+</div>
+
+<pre class="brush: css notranslate">.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}</pre>
+
+<p>{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}</p>
+
+<div class="note">
+<p><strong>Note:</strong> Please see <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a> for more examples.</p>
+</div>
+
+<h2 id="Specifications">Specifications</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 Images', '#radial-gradients', 'radial-gradients()')}}</td>
+   <td>{{Spec2('CSS3 Images')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("css.types.image.gradient.radial-gradient")}}</div>
+
+<h3 id="Quantum_CSS_notes">Quantum CSS notes</h3>
+
+<p>Gecko used to have a long-standing bug whereby radial gradients like <code>radial-gradient(circle gold,red)</code> would work, even though they shouldn't because of the missing comma between <code>circle</code> and <code>gold</code>. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a <code>radial-gradient()</code> function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, released in Firefox 57) fixed these bugs.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li>Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}</li>
+ <li>{{cssxref("&lt;image&gt;")}}</li>
+ <li>{{cssxref("_image","image()")}}</li>
+ <li>{{cssxref("element()")}}</li>
+ <li>{{cssxref("image-set","image-set()")}}</li>
+ <li>{{cssxref("cross-fade")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/reference/index.html b/files/zh-tw/web/css/reference/index.html
new file mode 100644
index 0000000000..2b2dfc4455
--- /dev/null
+++ b/files/zh-tw/web/css/reference/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS 參考文件
+slug: Web/CSS/Reference
+translation_of: Web/CSS/Reference
+---
+<p class="summary">Use this <strong>CSS reference</strong> to browse an <a href="#Keyword_index">alphabetical index</a> of all the standard <a href="/en-US/docs/Web/CSS">CSS</a> properties, <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">data types</a>, and <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>. You can also browse a list of all the CSS <a href="#Selectors">selectors organized by type</a> and a list of <a href="#Concepts">key CSS concepts</a>. Also included is a brief <a href="#DOM-CSS_CSSOM">DOM-CSS / CSSOM reference</a>.</p>
+
+<h2 id="基本語法規則">基本語法規則</h2>
+
+<h3 id="Style_rule_syntax">Style rule syntax</h3>
+
+<pre class="syntaxbox"><strong><var>selectorlist</var> {
+  <var>property</var>: <var>value</var>;</strong>
+  <var>[more property:value; pairs]</var>
+<strong>}</strong>
+
+... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
+
+See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below.
+</pre>
+
+<h4 id="Style_rule_examples">Style rule examples</h4>
+
+<pre class="brush: css">strong {
+  color: red;
+}
+
+div.menu-bar li:hover &gt; ul {
+  display: block;
+}
+</pre>
+
+<p>For a beginner-level introduction to the syntax of CSS selectors, please see <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">this tutorial</a>. Be aware that any <a href="/en-US/docs/Web/CSS/syntax">CSS syntax</a> error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM (the rule management system) is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<h3 id="At-rule_syntax">At-rule syntax</h3>
+
+<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div class="note">
+<p><strong>Note:</strong> The property names in this index do <strong>not</strong> include the <a href="/en-US/docs/Web/CSS/CSS_Properties_Reference">JavaScript names</a> where they differ from the CSS standard names.</p>
+</div>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors">Selectors</h2>
+
+<h3 id="Basic_selectors"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Basic selectors</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a> <code>elementname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a> <code>.classname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/ID_selectors">ID selector</a> <code>#idname</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a> <code>*</code>, <code>ns|*</code>, <code>*|*</code>, <code>|*</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a> <code>[attr=value]</code></li>
+</ul>
+
+<h3 id="Combinators"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinators</a></h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling combinator</a> <code>A + B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> <code>A ~ B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a> <code>A &gt; B</code></li>
+ <li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a> <code>A B</code></li>
+</ul>
+
+<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pcls">{{ Cssxref(":active") }}</li>
+ <li>{{cssxref(':any')}}</li>
+ <li>{{cssxref(':any-link')}}</li>
+ <li>{{ Cssxref(":checked") }}</li>
+ <li>{{ Cssxref(":default") }}</li>
+ <li>{{ Cssxref(":defined") }}</li>
+ <li>{{ Cssxref(":dir", ":dir()")}}</li>
+ <li>{{ Cssxref(":disabled") }}</li>
+ <li>{{ Cssxref(":empty") }}</li>
+ <li>{{ Cssxref(":enabled") }}</li>
+ <li>{{ Cssxref(":first") }}</li>
+ <li>{{ Cssxref(":first-child") }}</li>
+ <li>{{ Cssxref(":first-of-type") }}</li>
+ <li>{{ Cssxref(":fullscreen") }}</li>
+ <li>{{ Cssxref(":focus") }}</li>
+ <li>{{ Cssxref(":focus-visible") }}</li>
+ <li>{{ Cssxref(":host") }}</li>
+ <li>{{ Cssxref(":host()") }}</li>
+ <li>{{ Cssxref(":host-context()") }}</li>
+ <li>{{ Cssxref(":hover") }}</li>
+ <li>{{ Cssxref(":indeterminate") }}</li>
+ <li>{{ Cssxref(":in-range") }}</li>
+ <li>{{ Cssxref(":invalid") }}</li>
+ <li>{{ Cssxref(":lang", ":lang()") }}</li>
+ <li>{{ Cssxref(":last-child") }}</li>
+ <li>{{ Cssxref(":last-of-type") }}</li>
+ <li>{{ Cssxref(":left") }}</li>
+ <li>{{ Cssxref(":link") }}</li>
+ <li>{{ Cssxref(":not", ":not()") }}</li>
+ <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+ <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+ <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+ <li>{{ Cssxref(":only-child") }}</li>
+ <li>{{ Cssxref(":only-of-type") }}</li>
+ <li>{{ Cssxref(":optional") }}</li>
+ <li>{{ Cssxref(":out-of-range") }}</li>
+ <li>{{ Cssxref(":read-only") }}</li>
+ <li>{{ Cssxref(":read-write") }}</li>
+ <li>{{ Cssxref(":required") }}</li>
+ <li>{{ Cssxref(":right") }}</li>
+ <li>{{ Cssxref(":root") }}</li>
+ <li>{{ Cssxref(":scope") }}</li>
+ <li>{{ Cssxref(":target") }}</li>
+ <li>{{ Cssxref(":valid") }}</li>
+ <li>{{ Cssxref(":visited") }}</li>
+</ul>
+</div>
+
+<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3>
+
+<div class="index">
+<ul>
+ <li id="pelm">{{ Cssxref("::after") }}</li>
+ <li>{{ Cssxref("::backdrop") }}</li>
+ <li>{{ Cssxref("::before") }}</li>
+ <li>{{ Cssxref("::cue") }}</li>
+ <li>{{ Cssxref("::first-letter") }}</li>
+ <li>{{ Cssxref("::first-line") }}</li>
+ <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+ <li>{{ Cssxref("::selection") }}</li>
+ <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<div class="note">
+<p><strong>See also:</strong> A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>
+</div>
+
+<h2 id="Concepts">Concepts</h2>
+
+<h3 id="Syntax_and_semantics">Syntax and semantics</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/en-US/docs/Web/CSS/At-rule">At-rules</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Cascade">Cascade</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
+ <li><a href="/en-US/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/en-US/docs/Web/CSS/used_value">Used value</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
+ <li><a href="/en-US/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Containing block</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Margin collapsing</a></li>
+ <li><a href="/en-US/docs/Web/CSS/Replaced_element">Replaced elements</a></li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Stacking context</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<h3 id="Major_object_types">Major object types</h3>
+
+<ul>
+ <li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
+ <li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
+ <li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li>
+ <li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<h3 id="Important_methods">Important methods</h3>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixed with <code>-moz</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> (mostly prefixed with <code>-webkit</code>)</li>
+ <li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixed with <code>-ms</code>)</li>
+</ul>
diff --git a/files/zh-tw/web/css/replaced_element/index.html b/files/zh-tw/web/css/replaced_element/index.html
new file mode 100644
index 0000000000..10e6def514
--- /dev/null
+++ b/files/zh-tw/web/css/replaced_element/index.html
@@ -0,0 +1,20 @@
+---
+title: 置換元素 (Replaced element)
+slug: Web/CSS/Replaced_element
+translation_of: Web/CSS/Replaced_element
+---
+<div>{{CSSRef()}}</div>
+
+<h2 id="摘要">摘要</h2>
+
+<p>CSS 中所謂的「置換元素 (<strong>Replaced element</strong>)」，即是該元素所呈現的內容不在 CSS 的控制範圍之內。這類外部物件所呈現的內容均獨立於 CSS 之外。常見的置換元素包含 {{HTMLElement("img")}}、{{HTMLElement("object")}}、{{HTMLElement("video")}}，或如 {{HTMLElement("textarea")}} 與 {{HTMLElement("input")}} 的表單元素。某些元素 (像是 {{HTMLElement("audio")}} 或 {{HTMLElement("canvas")}}) 只有在特殊情況下才是置替換元素。若是透過 CSS {{cssxref("content")}} 屬性所插入的物件，則稱為「不具名置換元素 (Anonymous replaced elements)」。</p>
+
+<p>在某些情況下，CSS 會特別處理置換元素，如計算邊距空白 (Margin) 與某些 <code>auto</code> 的值。</p>
+
+<p>另需注意的是，<strong>某些</strong>置換元素本身就具備固定尺寸 (Intrinsic dimension) 或已定義的基準線 (Baseline)，並可由 CSS 的某些屬性 (如 {{cssxref("vertical-align")}}) 所利用。</p>
+
+<h2 id="另可參閱">另可參閱</h2>
+
+<ul>
+ <li>{{CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/ruby-position/index.html b/files/zh-tw/web/css/ruby-position/index.html
new file mode 100644
index 0000000000..6caff70d64
--- /dev/null
+++ b/files/zh-tw/web/css/ruby-position/index.html
@@ -0,0 +1,112 @@
+---
+title: ruby-position
+slug: Web/CSS/ruby-position
+translation_of: Web/CSS/ruby-position
+---
+<div>{{CSSRef}}{{SeeCompatTable}}</div>
+
+<p>CSS 的 <code><strong>ruby-position</strong></code> 屬性定義了 ruby 元素與該基礎元素（base element）相關聯的位置。它能在元素上方（<code>over</code>）、下方（<code>under</code>）、兩個字符之間、抑或右方（<code>inter-character</code>）。</p>
+
+<pre class="brush:css notranslate">/* 關鍵字值 */
+ruby-position: over;
+ruby-position: under;
+ruby-position: inter-character;
+
+/* 全域值 */
+ruby-position: inherit;
+ruby-position: initial;
+ruby-position: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="語法">語法</h2>
+
+<h3 id="屬性值">屬性值</h3>
+
+<dl>
+ <dt><code>over</code></dt>
+ <dd><img alt="Over example" src="https://mdn.mozillademos.org/files/10251/Screen%20Shot%202015-03-04%20at%2013.02.20.png" style="height: 31px; width: 77px;">如果文件以橫式排列，該關鍵字會指引旁註標記（ruby）出現在主文的上方。如果文件以直式排列，則會出現在主文的右方。</dd>
+ <dt><code>under</code></dt>
+ <dd><img alt="Under example" src="https://mdn.mozillademos.org/files/10249/Screen%20Shot%202015-03-04%20at%2013.02.07.png" style="height: 34px; width: 78px;">如果文件以橫式排列，該關鍵字會指引旁註標記出現在在主文的下方。如果文件以直式排列，則會出現在主文的左方。</dd>
+ <dt><code>inter-character</code></dt>
+ <dd>該關鍵字會指引旁註標記出現在在主文的兩個字符的中間。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<p>HTML 會因為 <code>ruby-position</code> 的值不同，而作出不同的渲染：</p>
+
+<pre class="brush: html notranslate">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<h3 id="旁註標記定位到主文上方">旁註標記定位到主文上方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:over;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文上方", 100, 40)}}</p>
+
+<h3 id="旁註標記定位到主文下方">旁註標記定位到主文下方</h3>
+
+<pre class="brush: html notranslate" style="display: none;">&lt;ruby&gt;
+  &lt;rb&gt;超電磁砲&lt;/rb&gt;
+  &lt;rp&gt;（&lt;/rp&gt;&lt;rt&gt;レールガン&lt;/rt&gt;&lt;rp&gt;）&lt;/rp&gt;
+&lt;/ruby&gt;
+</pre>
+
+<pre class="brush: css notranslate">ruby {
+    ruby-position:under;
+}</pre>
+
+<p>它會給出如下結果：</p>
+
+<p>{{EmbedLiveSample("旁註標記定位到主文下方", 100, 40)}}</p>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">註解</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Ruby', '#rubypos', 'ruby-position') }}</td>
+   <td>{{ Spec2('CSS3 Ruby') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.ruby-position")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>HTML 的旁註標記元素：{{HTMLElement("ruby")}}、{{HTMLElement("rt")}}、{{HTMLElement("rp")}}、{{HTMLElement("rtc")}}。</li>
+ <li>CSS 的旁註標記屬性：{{cssxref("ruby-align")}}、{{cssxref("ruby-merge")}}。</li>
+</ul>
diff --git a/files/zh-tw/web/css/shorthand_properties/index.html b/files/zh-tw/web/css/shorthand_properties/index.html
new file mode 100644
index 0000000000..2e880da57e
--- /dev/null
+++ b/files/zh-tw/web/css/shorthand_properties/index.html
@@ -0,0 +1,138 @@
+---
+title: 特性簡寫
+slug: Web/CSS/Shorthand_properties
+translation_of: Web/CSS/Shorthand_properties
+---
+<h2 id="Definition" name="Definition">定義</h2>
+
+<p><dfn>特性簡寫，是一種可以同時設定許多其他 CSS 屬性值的 CSS 屬性。</dfn> 使用特性簡寫，網頁開發者可以寫出更簡潔、且通常更具可讀性的樣式表，省時又省力。</p>
+
+<p>CSS 規範中定義，特性簡寫用來組合作用於相同主題的常見性質。舉例來說，CSS {{cssxref("background")}} 這個性質是個特性簡寫，可同時定義 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, 和 {{cssxref("background-position")}} 等屬性。同樣的，最常用的字體相關屬性，可以使用 {{cssxref("font")}} 來定義；圍繞在方塊周圍的邊界，則可簡單地以 {{cssxref("margin")}} 簡寫來定義。</p>
+
+<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">需謹慎之處</h2>
+
+<p>即便特性簡寫非常易於使用，仍有幾個需要銘記在心的情況：</p>
+
+<ol>
+ <li>未指明的值會被設為預設值。這聽起來真的很怪，但他的確會<strong>覆寫</strong>先前的設定值。比如：
+
+  <pre class="brush: css">background-color: red;
+background: url(images/bg.gif) no-repeat top right;</pre>
+  不會將背景設為紅色，而是使用 {{cssxref("background-color")}} 的預設值 <code>transparent</code>，由於較後面的規則為優先。</li>
+ <li>只有獨立的屬性可以被繼承。就如同遺失的值會被預設值取代一樣，不可能讓缺漏的值再去繼承個別屬性。關鍵字 <code>inherit</code> 可以用於屬性，但只能整體繼承，而不能用於個別值上。意思是，如果要繼承某個特定的值，就必須使用完整的語句，搭配 <code>inherit </code>關鍵字<code>。</code></li>
+ <li>簡寫屬性試著不強迫使用特定順序，在那些屬性有許多不同類型的值的狀況下的確很方便。但是在許多屬性具有類似值時就沒這麼簡單了，此時會以以下規則處理：
+  <ol>
+   <li>關於區塊的簡寫性質，諸如 {{cssxref("border-style")}}, {{cssxref("margin")}} 或 {{cssxref("padding")}}，就會使用連貫的１～４個值來定義下列這些邊：
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
+       <td><em>單值語法：</em><code>border-width: 1em</code> — 這個唯一的值定義所有四邊</td>
+      </tr>
+      <tr>
+       <td><img alt="border2.png" src="/files/3647/border2.png"></td>
+       <td><em>雙值語法：</em><code>border-width: 1em 2em</code> — 第一個值代表垂直部分，也就是上和下邊；第二個值則是指水平部分，也就是左右邊。</td>
+      </tr>
+      <tr>
+       <td><img alt="border3.png" src="/files/3648/border3.png"></td>
+       <td><em>三值語法：</em><code>border-width: 1em 2em 3em</code> — 第一個值代表上邊，第二個值代表兩旁的邊，而第三個值代表下邊。</td>
+      </tr>
+      <tr>
+       <td><img alt="border4.png" src="/files/3649/border4.png"></td>
+       <td>
+        <p><em>四值語法：</em><code>border-width: 1em 2em 3em 4em</code> — 這四個值分別代表上、右、下、左邊，順時針的方向由上開始排列（可以以 trouble 來記憶，即英文首文字的縮寫 TRBL）</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+   <li>與之相似地，關於區塊角落的屬性，像是 {{cssxref("border-radius")}}，也會使用連貫的１～４個值來代表四個角落：
+    <table>
+     <tbody>
+      <tr>
+       <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
+       <td><em>單值語法：</em><code>border-radius: 1em</code> — 這唯一的值代表了所有角落。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
+       <td><em>雙值語法：</em><code>border-radius: 1em 2em</code> — 第一個值代表左上和右下，第二個值則是右上及左下角。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
+       <td><em>三值語法：</em><code>border-radius: 1em 2em 3em</code> — 第一個值代表左上，第二個值代表右上及左下，第三個值則是右下的角落。</td>
+      </tr>
+      <tr>
+       <td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
+       <td>
+        <p><em>四值語法：</em><code>border-radius: 1em 2em 3em 4em</code> — 這四個值分別代表左上、右上、右下、左下，由左上開始的順時針排序。</p>
+       </td>
+      </tr>
+     </tbody>
+    </table>
+   </li>
+  </ol>
+ </li>
+</ol>
+
+<h2 id="Background_Properties" name="Background_Properties">背景屬性</h2>
+
+<p>背景會有下列這些屬性:</p>
+
+<pre class="brush:css">background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;</pre>
+
+<p>可以簡寫為一句宣告：</p>
+
+<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre>
+
+<p>（寫成簡化屬性的效果，完全等同於上方未簡化的屬性，外加 <code>background-attachment: scroll</code> 及其他 CSS3 中額外增加的屬性。)</p>
+
+<h2 id="Font_Properties" name="Font_Properties">字體屬性</h2>
+
+<p>下列的宣告:</p>
+
+<pre class="brush:css">font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;</pre>
+
+<p>可以簡寫成這樣：</p>
+
+<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
+
+<p>簡化定義的效果完全等同於未簡化前的屬性效果，加上 <code>font-variant: normal</code>、<code>font-size-adjust: none</code> (CSS2.0 / CSS3) 及 <code>font-stretch: normal</code> (CSS3) 等屬性。</p>
+
+<h2 id="Border_Properties" name="Border_Properties">邊框屬性</h2>
+
+<p>邊框的寬度、顏色、樣式可以簡寫成一句宣告。舉例來說：</p>
+
+<pre class="brush:css">border-width: 1px;
+border-style: solid;
+border-color: #000;</pre>
+
+<p>可以寫成：</p>
+
+<pre class="brush:css">border: 1px solid #000;</pre>
+
+<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">邊界與內距屬性</h2>
+
+<p>margin 和 padding 的簡化版本大致相同。下列的 CSS 宣告:</p>
+
+<pre class="brush:css">margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;</pre>
+
+<p>等同於下面的宣告（注意值的排序是順時鐘的順序：上，右，下，左 (TRBL，可以「trouble」這個單字的諧音來記憶）</p>
+
+<pre class="brush:css">margin: 10px 5px 10px 5px;</pre>
+
+<h2 id="See_also" name="See_also">相關連結</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
+ <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li>
+</ul>
diff --git a/files/zh-tw/web/css/syntax/index.html b/files/zh-tw/web/css/syntax/index.html
new file mode 100644
index 0000000000..c777095cb0
--- /dev/null
+++ b/files/zh-tw/web/css/syntax/index.html
@@ -0,0 +1,74 @@
+---
+title: 語法
+slug: Web/CSS/Syntax
+translation_of: Web/CSS/Syntax
+---
+<div>{{cssref}}</div>
+
+<p>串接式樣式表 (<a href="/en-US/docs/Web/CSS">CSS</a>) 語言的基礎目標是是讓瀏覽器引擎用特定的功能將元素寫在頁面上，像是顏色、位置與裝飾。CSS 語法反映出了目的，而它的基本組成為：</p>
+
+<ul>
+ <li><strong>屬性</strong>為人可閱讀的識別碼，定義使用哪項功能。</li>
+ <li><strong>參數</strong>描述了引擎必須如何處理這項功能。每個屬性都有一套有效的參數，由形式的文法與語意所定義，並由瀏覽器引擎執行。</li>
+</ul>
+
+<h2 id="CSS_宣告">CSS 宣告</h2>
+
+<p>設定特定參數值給 CSS 屬性是 CSS 語言的核心功能。一對屬性與參數叫做<strong>宣告</strong>，而為了適當的排版與套用樣式，任何 CSS 引擎會演算每個頁面上的元素該套用哪個宣告。</p>
+
+<p>在 CSS 中屬性與參數都預設為不區分大小寫。它們由冒號區隔，'<code>:</code>' (<code>U+003A COLON</code>)，而在屬性與參數前、中間與後面並不需要有空白，空白會被忽略。</p>
+
+<p><img alt="css syntax - declaration.png" class="default internal" src="https://mdn.mozillademos.org/files/16566/css_syntax_-_declaration.png" style=""></p>
+
+<p>在 CSS 中有超過<a href="/en-US/docs/Web/CSS/Reference">100種不同的屬性</a>與接近無限個不同的參數。並非所有的屬性與參數組都是被准許的，且每個屬性定義了哪些是有效的參數。當一個參數對屬性無效的時候，宣告會被認為是無效的且會完全被 CSS 引擎忽略。</p>
+
+<h2 id="CSS_宣告區塊">CSS 宣告區塊</h2>
+
+<p>Declarations are grouped in <strong>blocks</strong>, that is in a structure delimited by an opening brace, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), and a closing one, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Blocks sometimes can be nested, so opening and closing braces must be matched.</p>
+
+<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style=""></p>
+
+<p>Such blocks are naturally called <strong>declaration blocks</strong> and declarations inside them are separated by a semi-colon, '<code>;</code>' (<code>U+003B SEMICOLON</code>). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered <em>good style</em> to do it as it prevents forgetting to add it when extending the block with another declaration.</p>
+
+<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style=""></p>
+
+<div class="note">The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML {{htmlattrxref("style")}} attribute.</div>
+
+<h2 id="CSS_rulesets">CSS rulesets</h2>
+
+<p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
+
+<p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated <strong>selectors</strong> which are conditions selecting some elements of the page. The pair selector group-declarations block is called a <strong>ruleset</strong>, or often simply a <strong>rule</strong>.</p>
+
+<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style=""></p>
+
+<p>As an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">cascade</a> algorithm.</p>
+
+<div class="note">It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.<br>
+<br>
+This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole <em>selector</em> is invalid and therefore the entire rule is ignored (as invalid too).</div>
+
+<h2 id="CSS_statements">CSS statements</h2>
+
+<p>Rulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.</p>
+
+<p>A <strong>statement</strong> is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or [] pair).</p>
+
+<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
+
+<p>There are two kinds of statements:</p>
+
+<ul>
+ <li><strong>Rulesets</strong> (or <em>rules</em>) that, as seen, associate a collection of CSS declarations to a condition described by a selector.</li>
+ <li><strong>At-rules</strong> that start with an at sign, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), followed by an identifier and then continuing up the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of <a href="/en-US/docs/Web/CSS/At-rule">at-rules</a>, defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref("@charset") }} or {{ cssxref("@import") }}), conditional information (like {{ cssxref("@media") }} or {{ cssxref("@document") }}), or descriptive information (like {{ cssxref("@font-face") }}).</li>
+</ul>
+
+<p>Any statement which isn't a ruleset or an at-rule is invalid and ignored.</p>
+
+<p id="nested_statements">There is another group of statements – the <strong>nested statements</strong>. These are statements that can be used in a specific subset of at-rules – the <em>conditional group rules</em>. These statements only apply if a specific condition is matched: the <code>@media</code> at-rule content is applied only if the device on which the browser runs matches the expressed condition; the <code>@document</code> at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only <em>rulesets</em> could be used inside conditional group rules. That was very restrictive and this restriction was lifted in <a href="/en-US/docs/Web/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{ CSS_key_concepts()}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transform-function/index.html b/files/zh-tw/web/css/transform-function/index.html
new file mode 100644
index 0000000000..73b08839ed
--- /dev/null
+++ b/files/zh-tw/web/css/transform-function/index.html
@@ -0,0 +1,894 @@
+---
+title: transform-function
+slug: Web/CSS/transform-function
+translation_of: Web/CSS/transform-function
+---
+<p>{{ CSSRef("CSS Transforms") }}The <code>&lt;transform-function&gt;</code> CSS data type denotes a function applied to an element's representation in order to modify it. Usually such transform may be expressed by matrices and the resulting images can be determined using matrix multiplication on each point.</p>
+
+<h2 id="Coordinates_for_2D_graphics">Coordinates for 2D graphics</h2>
+
+<p>There are several coordinate models used when describing transformation. The most common are the Cartesian coordinate system and homogeneous coordinates.</p>
+
+<h3 id="笛卡兒坐標系"><span class="external">笛卡兒坐標系</span></h3>
+
+<p><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a></p>
+
+<p>In <a class="external" href="http://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinates</a> each point of the <a class="external" href="http://en.wikipedia.org/wiki/Euclidean_geometry">Euclidian space</a> is described using two values, the abscissa and the ordinate. The origin, the <code>(0, 0)</code> is the top-left corner of the element. Unlike the usual geometric convention, and like most cases in computer graphics, the y-axis goes to the bottom. Each point is mathematically described using the vector notation <code>(x,y)</code>.</p>
+
+<p>Each linear function is described using a 2x2 matrix like:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>Applying the transformation consists in doing, for each point, the matrix multiplication between both:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a>.</div>
+
+<p>It is possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a>.</div>
+
+<p>With this notation, it is possible to describe, and therefore composite, most usual transformations: rotations, scaling, or skewing. In fact all transformations that are linear functions can be described. One major transformation is not linear and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two more parameters.</p>
+
+<p><a class="external" href="http://en.wikipedia.org/wiki/August_Ferdinand_M%C3%B6bius">Möbius</a>' <a class="external" href="http://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="http://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> leading to 3x3 transformation matrices, though more complex and unusual for non-specialists, doesn't suffer from the translation limitation as these can be expressed as linear functions in this algebra, removing the need for special cases.</p>
+
+<h2 id="Coordinates_for_3D_graphics">Coordinates for 3D graphics</h2>
+
+<h2 id="Functions_defining_transformations">Functions defining transformations</h2>
+
+<h3 id="matrix()"><code>matrix()</code></h3>
+
+<p>The <code>matrix()</code> CSS function specifies a homogeneous 2D transformation matrix comprised of the specified six values. The constant values of such matrices are implied and not passed as parameters; the other parameters are described in the column-major order.</p>
+
+<p><code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code>matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+
+<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for <strong>tx</strong> and <strong>ty</strong>.</div>
+
+<h4 id="表達式">表達式</h4>
+
+<pre class="syntaxbox">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
+</pre>
+
+<h4 id="值">值</h4>
+
+<dl>
+ <dt><em>a</em> <em>b</em> <em>c</em> <em>d</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the linear transformation.</dd>
+ <dt><em>tx</em> <em>ty</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the translation to apply.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>ty</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>tx</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="matrix3d()"><code>matrix3d()</code></h3>
+
+<p>The <code>matrix3d()</code> CSS function describes a 3D transform as a 4x4 homogeneous matrix. The 16 parameters are described in the column-major order.</p>
+
+<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for <strong>a4</strong>, <strong>b4</strong> and <strong>c4</strong>.</div>
+
+<h4 id="表達式_2">表達式</h4>
+
+<pre class="syntaxbox">matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)</pre>
+
+<h4 id="值_2">值</h4>
+
+<dl>
+ <dt><em>a1 b1 c1 d1</em> <em>a2 b2 c2 d2 </em><em>a3 b3 c3 d3</em> <em>d4</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the linear transformation.</dd>
+ <dt><em>a4</em> <em>b4 c4</em></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}} describing the translation to apply.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plan.</td>
+   <td colspan="1" rowspan="2">Cartesian-coordinate matrix doesn't allow to represent a generic 3d affine transforms as translations are not linear transforms.</td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>a1</mtd><mtd>a2</mtd><mtd>a3</mtd><mtd>a4</mtd></mtr><mtr><mtd>b1</mtd><mtd>b2</mtd><mtd>b3</mtd><mtd>b4</mtd></mtr><mtr><mtd>c1</mtd><mtd>c2</mtd><mtd>c3</mtd><mtd>c4</mtd></mtr><mtr><mtd>d1</mtd><mtd>d2</mtd><mtd>d3</mtd><mtd>d4</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="perspective()"><code>perspective()</code></h3>
+
+<p>The <code>perspective()</code> CSS function defines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z&gt;0 becomes larger; each 3D-element with z&lt;0 becomes smaller. The strength of the effect is determined by the value of this property.</p>
+
+<h4 id="表達式_3">表達式</h4>
+
+<pre class="syntaxbox">perspective(l)
+</pre>
+
+<h4 id="值_3">值</h4>
+
+<dl>
+ <dt><em>l</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the element. If it is 0 or a negative value, no perspective transform is applied.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transform applies to the 3D space and cannot be represented on the plan.</p>
+   </td>
+   <td colspan="1" rowspan="2">A perspective is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotate()"><code>rotate()</code></h3>
+
+<p><img src="/@api/deki/files/5976/=transform-functions-rotate_19.5.png" style="float: left;">The <code>rotate()</code> CSS function defines a transformation that moves the element around a fixed point (as specified by the {{ Cssxref("transform-origin") }} property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called <em>point reflection</em>.</p>
+
+<h4 id="表達式_4">表達式</h4>
+
+<pre class="syntaxbox">rotate(<em>a</em>)
+</pre>
+
+<h4 id="值_4">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) </code><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">sin(</span><em>a</em><span style="background-color: rgba(212, 221, 228, 0.14902); font-family: consolas,monaco,andale mono,monospace;">)</span><code> -sin(a) cos(<em>a</em>) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotate3d()"><code>rotate3d()</code></h3>
+
+<p>The <code>rotate3d()</code>CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>In the 3D space, rotations have three degrees of liberty, describing an axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} CSS property. If the vector is not <em>normalized</em>, that is the sum of the square of its three coordinates is not 1, it will be normalized internally. A non-normalizable vector, like the null vector, [0, 0, 0], will cause the rotation not to be applied, without invaliding the whole CSS property.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_5">表達式</h4>
+
+<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h4 id="值_5">值</h4>
+
+<dl>
+ <dt><em>x</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the x-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>y</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the y-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>z</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} describing the z-coordinate of the vector denoting the axis of rotation.</dd>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateX()"><code>rotateX()</code></h3>
+
+<p>The <code>rotateX()</code>CSS function defines a transformation that moves the element around the abscissa without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateX(a)</code>is a shorthand for <code>rotate3D(1, 0, 0, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_6">表達式</h4>
+
+<pre class="syntaxbox">rotateX(<em>a</em>)
+</pre>
+
+<h4 id="值_6">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateY()"><code>rotateY()</code></h3>
+
+<p>The <code>rotateY()</code>CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateY(a)</code>is a shorthand for <code>rotate3D(0, 1, 0, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_7">表達式</h4>
+
+<pre class="syntaxbox">rotateY(<em>a</em>)
+</pre>
+
+<h4 id="值_7">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>0</mtd><mtd>sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="rotateZ()"><code>rotateZ()</code></h3>
+
+<p>The <code>rotateZ()</code>CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.</p>
+
+<p>The axis of rotation passes by the origin, defined by {{ cssxref("transform-origin") }} CSS property.</p>
+
+<p><code>rotateZ(a)</code>is a shorthand for <code>rotate3D(0, 0, 1, a)</code>.</p>
+
+<div class="note">In opposition to rotations in the plane, the composition of 3D rotations is usually not commutative; it means that the order in which the rotations are applied is crucial.</div>
+
+<h4 id="表達式_8">表達式</h4>
+
+<pre class="syntaxbox">rotateZ(<em>a</em>)
+</pre>
+
+<h4 id="值_8">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math><mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scale()"><code>scale()</code></h3>
+
+<p><img src="/@api/deki/files/5804/=transform-functions-scale_2_2.png?size=webview" style="float: left; height: 290px; width: 350px;"></p>
+
+<p>The <code>scale()</code> CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.</p>
+
+<p>This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If both coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</p>
+
+<p>When outside the <code>]-1, 1[</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
+
+<div class="note">The <code>scale</code><code>()</code> function only applies the transformation in the Euclidian plane (in 2D). To scale in the space, the <code>scale3D()</code> function has to be used.</div>
+
+<h4 id="表達式_9">表達式</h4>
+
+<pre class="syntaxbox">scale(<em>sx</em>) or
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h4 id="值_9">值</h4>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the abscissa of the scaling vector.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the ordinate of the scaling vector. If not present, its default value is <em><strong>sx</strong></em>, leading to a uniform scaling preserving the shape of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scale3d()"><code>scale3d()</code></h3>
+
+<p>The <code>scale3d()</code> CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.</p>
+
+<p>This transformation is characterized by a vector whose coordinates define how much scaling is done in each direction. If all three coordinates of the vector are equal, the scaling is uniform, or isotropic, and the shape of the element is preserved. In that case, the scaling function defines a homothetic transformation.</p>
+
+<p>When outside the <code>[-1, 1]</code> range, the scaling enlarges the element in the direction of the coordinate; when inside the range, it shrinks the element in that direction. When equal to <code>1</code> it does nothing and when negative it performs a <em>point reflection</em> and the size modification.</p>
+
+<h4 id="表達式_10">表達式</h4>
+
+<pre class="syntaxbox">scale3d(<em>sx</em>, <em>sy</em>, <em>sz</em>)
+</pre>
+
+<h4 id="值_10">值</h4>
+
+<dl>
+ <dt><em>sx</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the abscissa of the scaling vector.</dd>
+ <dt><em>sy</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the ordinate of the scaling vector.</dd>
+ <dt><em>sz</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the z-component of the scaling vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>sz</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleX()"><code>scaleX()</code></h3>
+
+<p><img src="/@api/deki/files/5807/=transform-functions-scaleX_2.png?size=webview" style="float: left; height: 296px; width: 350px;">The <code>scaleX()</code> CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleX(sx)</code> is a shorthand for <code>scale(sx, 1)</code> or for <code>scale3d(sx, 1, 1)</code>.</p>
+
+<p><code>scaleX(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a vertical axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_11">表達式</h4>
+
+<pre class="syntaxbox">scaleX(<em>s</em>)
+</pre>
+
+<h4 id="值_11">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the abscissa of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>s</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>1</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>s<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[s 0 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleY()"><code>scaleY()</code></h3>
+
+<p><img src="/@api/deki/files/5967/=transform-functions-scaleY_2.png" style="float: left;"></p>
+
+<p>The <code>scaleY()</code> CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleY(sy)</code> is a shorthand for <code>scale(1, sy)</code> or for <code>scale3d(1, sy, 1)</code>.</p>
+
+<p><code>scaleY(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> with a horizontal axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_12">表達式</h4>
+
+<pre class="syntaxbox">scaleY(s)
+</pre>
+
+<h4 id="值_12">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the ordinate of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>s</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>s</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 s 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="scaleZ()"><code>scaleZ()</code></h3>
+
+<p>The <code>scaleZ()</code> CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is <code>1</code>, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.</p>
+
+<p><code>scaleZ(sz)</code> is a shorthand for <code>scale3d(1, 1, sz)</code>.</p>
+
+<p><code>scaleZ(-1)</code> defines an <a class="external" href="http://en.wikipedia.org/wiki/Axial_symmetry">axial symmetry</a> along the z-axis passing by the origin (as specified by the <code><a href="transform-origin" rel="custom">transform-origin</a></code> property).</p>
+
+<h4 id="表達式_13">表達式</h4>
+
+<pre class="syntaxbox">scaleZ(s)
+</pre>
+
+<h4 id="值_13">值</h4>
+
+<dl>
+ <dt><em>s</em></dt>
+ <dd>Is a {{cssxref("&lt;number&gt;")}} representing the scaling factor to apply on the z-coordinate of each point of the element.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>s</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skew()"><code>skew()</code></h3>
+
+<p>The <code>skew()</code> CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 id="表達式_14">表達式</h4>
+
+<pre class="syntaxbox">skew(<em>ax</em>)       <em>or</em>
+skew(<em>ax</em>, <em>ay</em>)
+</pre>
+
+<h4 id="值_14">值</h4>
+
+<dl>
+ <dt><em>ax</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the abscissa.</dd>
+ <dt><em>ay</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the ordinate.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd></mtr><mtr>tan(ay)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr><mtr></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ax)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ay)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(ay) tan(ax) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skewX()"><code>skewX()</code></h3>
+
+<p>The <code>skewX()</code> CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 class="editable" id="表達式_15"><span>表達式</span></h4>
+
+<pre class="syntaxbox">skewX(a)
+</pre>
+
+<h4 id="值_15">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the abscissa.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd></mtr><mtr>0<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>tan(ay)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 tan(a) 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="skewY()"><code>skewY()</code></h3>
+
+<p>The <code>skewY()</code> CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.</p>
+
+<h4 class="editable" id="表達式_16">表達式</h4>
+
+<pre class="syntaxbox">skewY(a)
+</pre>
+
+<h4 id="值_16">值</h4>
+
+<dl>
+ <dt><em>a</em></dt>
+ <dd>Is an {{ cssxref("&lt;angle&gt;") }} representing the angle to use to distort the element along the ordinate.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>tan(ax)<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 tan(a) 0 1 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translate()"><code>translate()</code></h3>
+
+<p><img src="/@api/deki/files/5970/=transform-functions-translate_2.png" style="float: left;">The <code>translate()</code> CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.</p>
+
+<h4 id="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">translate(tx)       <em>or</em>
+translate(tx, ty)
+</pre>
+
+<h4 id="值_17">值</h4>
+
+<dl>
+ <dt><em>tx</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+ <dt><em>ty</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector. If missing, it is assumed to be equals to <strong>tx</strong> :  <code>translate(2)</code> means <code>translate(2, 2)</code>.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translate3d()"><code>translate3d()</code></h3>
+
+<p>The <code>translate3d()</code> CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.</p>
+
+<h4 id="表達式_17">表達式</h4>
+
+<pre class="syntaxbox">translate3d(tx, ty, tz)
+</pre>
+
+<h4 id="值_18">值</h4>
+
+<dl>
+ <dt><em>tx</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+ <dt><em>ty</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector.</dd>
+ <dt><em>tz</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the z component of the translating vector. It can't be a {{cssxref("&lt;percentage&gt;")}} value; in that case the property containing the transform is considered invalid.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transform applies to the 3D space and cannot be represented on the plane.</p>
+   </td>
+   <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateX()"><code>translateX()</code></h3>
+
+<p><img src="/@api/deki/files/5972/=transform-functions-translateX_2.png" style="float: left;">The <code>translateX()</code> CSS function moves the element horizontally on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves horizontally.</p>
+
+<p><code>translateX(tx)</code> is a shortcut for <code>translate(tx, 0)</code>.</p>
+
+<h4 id="表達式_18">表達式</h4>
+
+<pre class="syntaxbox">translateX(t)
+</pre>
+
+<h4 id="值_19">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the abscissa of the translating vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 t 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateY()"><code>translateY()</code></h3>
+
+<p><img src="/@api/deki/files/5971/=transform-functions-translateY_2.png" style="float: left;">The <code>translateY()</code> CSS function moves the element vertically on the plane. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves vertically.</p>
+
+<p><code>translateY(ty)</code> is a shortcut for <code>translate(0, ty)</code>.</p>
+
+<h4 id="Syntax_2">Syntax</h4>
+
+<pre class="syntaxbox">translateY(t)
+</pre>
+
+<h4 id="值_20">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} representing the ordinate of the translating vector.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>A translation is not a linear transform in ℝ<sup>2</sup> and cannot be represented using a matrix in the cartesian coordinates system.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 0 t]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="translateZ()"><code>translateZ()</code></h3>
+
+<p>The <code>translateZ()</code> CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a {{cssxref("&lt;length&gt;")}} defining how much it moves.</p>
+
+<p><code>translateZ(tz)</code> is a shorthand for <code>translate3d(0, 0, tz)</code>.</p>
+
+<h4 id="表達式_19">表達式</h4>
+
+<pre class="syntaxbox">translateZ(t)
+</pre>
+
+<h4 id="值_21">值</h4>
+
+<dl>
+ <dt><em>t</em></dt>
+ <dd><span style="line-height: 1.5;">Is a {{cssxref("&lt;length&gt;")}} representing the z-component of the translating vector. It can't be a {{cssxref("&lt;percentage&gt;")}} value; in that case the property containing the transform is considered invalid.</span></dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">This transform applies to the 3D space and cannot be represented on the plane.</td>
+   <td colspan="1" rowspan="2">A translation is not a linear transform in ℝ<sup>3</sup> and cannot be represented using a matrix in the Cartesian coordinates system.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/zh-tw/web/css/transform-function/translate3d()/index.html b/files/zh-tw/web/css/transform-function/translate3d()/index.html
new file mode 100644
index 0000000000..149980d71d
--- /dev/null
+++ b/files/zh-tw/web/css/transform-function/translate3d()/index.html
@@ -0,0 +1,116 @@
+---
+title: translate3d()
+slug: Web/CSS/transform-function/translate3d()
+translation_of: Web/CSS/transform-function/translate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>translate3d()</code></strong> <a href="/zh-TW/docs/Web/CSS">CSS</a> 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("&lt;transform-function&gt;")}} 資料型別。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
+
+
+
+<p>這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)
+</pre>
+
+<h3 id="數值">數值</h3>
+
+<dl>
+ <dt><code>tx</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的橫坐標。</dd>
+ <dt><code>ty</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的縱坐標。</dd>
+ <dt><code>tz</code></dt>
+ <dd>其 {{cssxref("&lt;length&gt;")}} 代表平移向量的 z 分量。數值不能是 {{cssxref("&lt;percentage&gt;")}}：否則，此轉場的屬性無效。</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">ℝ<sup>2</sup> 上的笛卡兒座標（Cartesian coordinate）</th>
+   <th scope="col">ℝℙ<sup>2</sup> 上的齊次坐標（homogeneous coordinates）</th>
+   <th scope="col">ℝ<sup>3</sup> 上的笛卡兒座標</th>
+   <th scope="col">ℝℙ<sup>3</sup> 上的齊次坐標</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>This transformation applies to the 3D space and can't be represented on the plane.</p>
+   </td>
+   <td colspan="1" rowspan="2">A translation is not a linear transformation in ℝ<sup>3</sup> and can't be represented using a Cartesian-coordinate matrix.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="使用單軸平移">使用單軸平移</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p>
+
+<h3 id="Combining_z-axis_and_x-axis_translation">Combining z-axis and x-axis translation</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Static&lt;/div&gt;
+&lt;div class="moved"&gt;Moved&lt;/div&gt;
+&lt;div&gt;Static&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="結果_2">結果</h4>
+
+<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>請參見 <code><a href="/zh-TW/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code>。</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transform-origin/index.html b/files/zh-tw/web/css/transform-origin/index.html
new file mode 100644
index 0000000000..2cfccb1716
--- /dev/null
+++ b/files/zh-tw/web/css/transform-origin/index.html
@@ -0,0 +1,455 @@
+---
+title: transform-origin
+slug: Web/CSS/transform-origin
+tags:
+  - CSS
+translation_of: Web/CSS/transform-origin
+---
+<div>{{ CSSRef }}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> 內的<strong><code>transform-origin</code></strong>屬性可以設定元素變化的原點。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>
+
+
+
+<p>變化原點指的是應用變化的點。舉例來說， <code><a href="/en-US/docs/Web/CSS/transform-function/rotate">rotate()</a></code>函數的原點為旋轉中心。 (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush: css no-line-numbers">/* One-value syntax */
+transform-origin: 2px<em>;</em>
+transform-origin: bottom;
+
+/* x-offset | y-offset */
+transform-origin: 3cm 2px;
+
+/* x-offset-keyword | y-offset */
+transform-origin: left 2px;
+
+/* x-offset-keyword | y-offset-keyword */
+transform-origin: right top;
+
+/* y-offset-keyword | x-offset-keyword */
+transform-origin: top right;
+
+/* x-offset | y-offset | z-offset */
+transform-origin: 2px 30% 10px;
+
+/* x-offset-keyword | y-offset | z-offset */
+transform-origin: left 5px -3px;
+
+/* x-offset-keyword | y-offset-keyword | z-offset */
+transform-origin: right bottom 2cm;
+
+/* y-offset-keyword | x-offset-keyword | z-offset */
+transform-origin: bottom right 2cm;
+
+/* Global values */
+transform-origin: inherit;
+transform-origin: initial;
+transform-origin: unset;
+</pre>
+
+<p>The <code>transform-origin</code> p屬性可以使用多次，每一次都代表著一個偏移量。若未設定偏移量，則重置為其對應的 <a href="/en-US/docs/Web/CSS/initial_value">初始值</a>。</p>
+
+<p>If two or more values are defined and either no value is a keyword, or the only used keyword is <code>center</code>, then the first value represents the horizontal offset and the second represents the vertical offset.</p>
+
+<ul>
+ <li>One-value syntax:
+  <ul>
+   <li>The value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code> or <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Two-value syntax:
+  <ul>
+   <li>One value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>left</code>, <code>center</code>, and <code>right</code>.</li>
+   <li>The other value must be a {{cssxref("&lt;length&gt;")}}, a {{cssxref("&lt;percentage&gt;")}}, or one of the keywords <code>top</code>, <code>center</code>, and <code>bottom</code>.</li>
+  </ul>
+ </li>
+ <li>Three-value syntax:
+  <ul>
+   <li>The first two values are the same as for the two-value syntax.</li>
+   <li>The third value must be a {{cssxref("&lt;length&gt;")}}. It always represents the Z offset.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><em>x-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the left edge of the box the origin of the transform is set.</dd>
+ <dt><em>offset-keyword</em></dt>
+ <dd>Is one of the <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>, or <code>center</code> keyword describing the corresponding offset.</dd>
+ <dt><em>y-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the top edge of the box the origin of the transform is set.</dd>
+ <dt><em>x-offset-keyword</em></dt>
+ <dd>Is one of the <code>left</code>, <code>right</code>, or <code>center</code> keyword describing how far from the left edge of the box the origin of the transform is set.</dd>
+ <dt><em>y-offset-keyword</em></dt>
+ <dd>Is one of the <code>top</code>, <code>bottom</code>, or <code>center</code> keyword describing how far from the top edge of the box the origin of the transform is set.</dd>
+ <dt><em>z-offset</em></dt>
+ <dd>Is a {{cssxref("&lt;length&gt;")}} (and never a {{cssxref("&lt;percentage&gt;")}} which would make the statement invalid) describing how far from the user eye the z=0 origin is set.</dd>
+</dl>
+
+<p>The keywords are convenience shorthands and match the following {{cssxref("&lt;percentage&gt;")}} values:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Value</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>left</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>center</code></td>
+   <td><code>50%</code></td>
+  </tr>
+  <tr>
+   <td><code>right</code></td>
+   <td><code>100%</code></td>
+  </tr>
+  <tr>
+   <td><code>top</code></td>
+   <td><code>0%</code></td>
+  </tr>
+  <tr>
+   <td><code>bottom</code></td>
+   <td><code>100%</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Code</th>
+   <th>Sample</th>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: none;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_none">
+    <pre class="brush: html">
+&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box1 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: none;
+-webkit-transform: none;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_none', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_only">
+    <pre class="brush: html">
+&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box2 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate">
+    <pre class="brush: html">
+&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box3 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: 100% 100%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_percentage">
+    <pre class="brush: html">
+&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box4 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: 100% 100%;
+-webkit-transform-origin: 100% 100%;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_percentage', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: rotate(30deg);<br>
+     transform-origin: -1em -3em;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_rotate_with_em">
+    <pre class="brush: html">
+&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box5 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform-origin: -1em -3em;
+-webkit-transform-origin: -1em -3em;
+transform: rotate(30deg);
+-webkit-transform: rotate(30deg);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_rotate_with_em', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_only">
+    <pre class="brush: html">
+&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box6 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_only', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 0 0;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale_without_origin">
+    <pre class="brush: html">
+&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box7 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 0 0;
+-webkit-transform-origin: 0 0;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale_without_origin', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: scale(1.7);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_scale">
+    <pre class="brush: html">
+&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box8 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: scale(<code>1.7</code>);
+-webkit-transform: scale(<code>1.7</code>);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_scale', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewX(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_x">
+    <pre class="brush: html">
+&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box9 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewX(50deg);
+-webkit-transform: skewX(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_x', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>transform: skewY(50deg);<br>
+     transform-origin: 100% -30%;</code></p>
+   </td>
+   <td>
+    <div class="hidden" id="transform_skew_y">
+    <pre class="brush: html">
+&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
+</pre>
+
+    <pre class="brush: css">
+.box10 {
+margin: 0.5em;
+width: 3em;
+height: 3em;
+border: solid 1px;
+background-color: palegreen;
+transform: skewY(50deg);
+-webkit-transform: skewY(50deg);
+transform-origin: 100% -30%;
+-webkit-transform-origin: 100% -30%;
+}
+</pre>
+    </div>
+
+    <div>{{EmbedLiveSample('transform_skew_y', '', 120, '', '', 'no-button') }}</div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Specifications">Specifications</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 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{Cssinfo}}</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.transform-origin")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/transform/index.html b/files/zh-tw/web/css/transform/index.html
new file mode 100644
index 0000000000..7b1f9ee11b
--- /dev/null
+++ b/files/zh-tw/web/css/transform/index.html
@@ -0,0 +1,159 @@
+---
+title: transform
+slug: Web/CSS/transform
+tags:
+  - CSS
+  - CSS Property
+  - NeedsBrowserCompatibility
+  - Reference
+  - Transforms
+translation_of: Web/CSS/transform
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transform</code></strong> <a href="/zh-TW/docs/Web/CSS">CSS</a> 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
+
+<p>如果這個屬性的值不是 <code>none</code>，將會建立一個 <a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>。在這個情況下，此元素將被其所包含的 <code>position: fixed</code> 元素當成一個 containing block。</p>
+
+<div class="warning">
+<p>只有可以變形的元素可以被變形，這包括所有被CSS box model掌管輸出的元素，除了<a href="/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">視覺格式化模型, </a><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col">table-column boxes</a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup">table-colunm-group boxes</a>。</p>
+</div>
+
+<h2 id="語法">語法</h2>
+
+<pre class="notranslate">/* Keyword values */
+transform: none;
+
+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+transform: perspective(17px);
+transform: rotate(0.5turn);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: translate(12px, 50%);
+transform: translate3d(12px, 50%, 3em);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: translateZ(2px);
+transform: scale(2, 0.5);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: scaleZ(0.3);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+
+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
+
+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;</pre>
+
+<p><code>transform</code> 屬性可能被指定為關鍵字值 <code><a href="#none">none</a></code> 或著一或多個 <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code> 值。</p>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
+ <dd>可使用一個或多個 <a href="/zh-TW/docs/Web/CSS/transform-function">CSS transform functions</a>。複合的transforms 會由左至右的順序來套用。</dd>
+ <dt id="none"><code>none</code></dt>
+ <dd>設定為沒有套用任何 transform。</dd>
+</dl>
+
+<h2 id="可使用性問題">可使用性問題</h2>
+
+<p>改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。</p>
+
+<p>另外也可考慮使用{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的<a href="/en-US/docs/Web/CSS/Media_Queries">媒體詢問</a>，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。</p>
+
+<p>瞭解更多:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
+ <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
+</ul>
+
+<h2 id="正式定義">正式定義</h2>
+
+<p>{{CSSInfo}}</p>
+
+<h2 id="標準語法">標準語法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="平移、旋轉元素">平移、旋轉元素</h3>
+
+
+
+<h3 id="HTML">HTML</h3>
+
+
+
+<pre class="brush: html notranslate">&lt;p&gt;Transformed element&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">p {
+  border: solid red;
+  transform: translate(100px) rotate(20deg);
+  transform-origin: 0 -250px;
+}</pre>
+
+<h3 id="結果">結果</h3>
+
+<p>{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}</p>
+
+<h3 id="更多範例">更多範例</h3>
+
+<p>請參考<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms">使用 CSS transforms</a> 以及 {{cssxref("&lt;transform-function&gt;")}} 的更多範例。</p>
+
+<h2 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('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
+   <td>{{Spec2('CSS Transforms 2')}}</td>
+   <td>Adds 3D transform functions.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.transform")}}</p>
+
+<h2 id="參見">參見</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/CSS/Using_CSS_transforms">使用 CSS transforms</a></li>
+ <li>{{cssxref("&lt;transform-function&gt;")}} data type</li>
+ <li>A cross-browser 2D <a href="https://louisremi.github.io/jquery.transform.js/">transform plugin for jQuery</a></li>
+</ul>
diff --git a/files/zh-tw/web/css/transition-duration/index.html b/files/zh-tw/web/css/transition-duration/index.html
new file mode 100644
index 0000000000..f29fa166ca
--- /dev/null
+++ b/files/zh-tw/web/css/transition-duration/index.html
@@ -0,0 +1,342 @@
+---
+title: transition-duration
+slug: Web/CSS/transition-duration
+tags:
+  - CSS
+  - CSS Property
+  - CSS 轉場
+  - Reference
+translation_of: Web/CSS/transition-duration
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-duration</code></strong> <a href="/en/CSS" title="CSS">CSS</a> 屬性指定轉場動畫所需經歷的時間，以秒或是毫秒為單位。默認值為0，表示沒有任何轉場動畫。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
+
+
+
+<p>你可以指定多個時間長度，每一個時間長度都會被應用在{{ cssxref("transition-property") }} 設定的對應屬性上(which acts as a master list.) 如果指定的時間長度的數量比對應屬性的數量少，那麼時間長度就會被重複使用。反之，多餘的時間長度就會被刪去。而這兩種情況之下的CSS宣告都是有效的。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css no-line-numbers">/* &lt;time&gt; 值 */
+transition-duration: 6s;
+transition-duration: 120ms;
+transition-duration: 1s, 15s;
+transition-duration: 10s, 30s, 230ms;
+
+/* 全域值 */
+transition-duration: inherit;
+transition-duration: initial;
+transition-duration: unset;
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;time&gt;</code></dt>
+ <dd>{{cssxref("&lt;time&gt;")}}類型表示轉場動畫從舊狀態轉至新狀態所需要的時間。如果時間長度為0，表示沒有任何轉場，狀態之間會立即改變。若時間長度為負值則無效。</dd>
+</dl>
+
+<h3 id="正式語法">正式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<div>
+<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 0.5s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
+</div>
+
+<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 1s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
+</div>
+
+<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 2s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
+</div>
+
+<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-duration: 4s</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
+</div>
+</div>
+
+<h2 id="規範">規範</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-duration', 'transition-duration') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器支援情形">瀏覽器支援情形</h2>
+
+
+
+<p>{{Compat("css.properties.transition-duration")}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS 轉場 </a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transition-timing-function/index.html b/files/zh-tw/web/css/transition-timing-function/index.html
new file mode 100644
index 0000000000..492a4e3c3e
--- /dev/null
+++ b/files/zh-tw/web/css/transition-timing-function/index.html
@@ -0,0 +1,605 @@
+---
+title: transition-timing-function
+slug: Web/CSS/transition-timing-function
+translation_of: Web/CSS/transition-timing-function
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition-timing-function</code></strong> CSS 屬性用於表示各個被<a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">動畫特效</a>影響的屬性的區間值計算方式。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition-timing-function.html")}}</div>
+
+<p class="hidden">這個互動式範例存放在 GitHub 專案中，如果你想貢獻，請 Clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 並發送 PR。</p>
+
+<p> </p>
+
+<p>本質上，這個屬性讓你使用加速度曲線來表示動畫變換的速度。</p>
+
+<p>而每個可以動畫化的屬性使用一個 {{cssxref("&lt;timing-function&gt;")}} 作為加速度曲線。</p>
+
+<p> </p>
+
+<p>你也許有許多時間函數，而你可以透過使用 {{ cssxref("transition-property") }} 屬性來個別設置。如果有前述清單的數量超過時間函數的數量，則會使用預設值 <code>ease</code>；如果少於那多餘的時間函數會被忽略，在這兩種情況，CSS 宣告總會有效。</p>
+
+<h2 id="語法">語法</h2>
+
+<pre class="brush:css no-line-numbers">/* Keyword */
+transition-timing-function: ease;
+transition-timing-function: ease-in;
+transition-timing-function: ease-out;
+transition-timing-function: ease-in-out;
+transition-timing-function: linear;
+transition-timing-function: step-start;
+transition-timing-function: step-end;
+
+/* 函數 */
+transition-timing-function: steps(4, end);
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+transition-timing-function: frames(10);
+
+/* 多個函數 */
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* 全域值 */
+transition-timing-function: inherit;
+transition-timing-function: initial;
+transition-timing-function: unset;
+
+/* 包含 transition-property */
+transition-property: width, height;
+transition-timing-function: ease-in, ease-out; // ease-in to width and ease-out to height
+
+</pre>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>&lt;timing-function&gt;</code></dt>
+ <dd>每個 {{cssxref("&lt;timing-function&gt;")}} 連結到對應的動畫化屬性，請參考 {{ cssxref("transition-property") }}。</dd>
+</dl>
+
+<h3 id="公式語法">公式語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<div>
+<div id="ttf_ease" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_ease",275,150)}}</div>
+</div>
+
+<div id="ttf_easein" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easein",275,150)}}</div>
+</div>
+
+<div id="ttf_easeout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeout",275,150)}}</div>
+</div>
+
+<div id="ttf_easeinout" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: ease-in-out</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_easeinout",275,150)}}</div>
+</div>
+</div>
+
+<div id="ttf_linear" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: linear</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_linear",275,150)}}</div>
+</div>
+
+<div id="ttf_stepstart" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-start</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepstart",275,150)}}</div>
+</div>
+
+<div id="ttf_stepend" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: step-end</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_stepend",275,150)}}</div>
+</div>
+
+<div id="ttf_step4end" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
+<p><code>transition-timing-function: steps(4, end)</code></p>
+
+<div style="display: none;">
+<pre class="brush:html"> &lt;div class="parent"&gt;
+  &lt;div class="box"&gt;Lorem&lt;/div&gt;
+&lt;/div&gt;
+  </pre>
+
+<pre class="brush:css;">.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+</pre>
+
+<pre class="brush:js">function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+</pre>
+</div>
+
+<div>{{EmbedLiveSample("ttf_step4end",275,150)}}</div>
+</div>
+
+<h2 id="規格">規格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">規格</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Transitions', '#transition-timing-function-property', 'transition-timing-function') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>初始定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="相容性">相容性</h2>
+
+<div class="hidden">相容性表格是根據結構化資料自動建立的，如果你想貢獻，請參考 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並發送 PR。</div>
+
+<p>{{Compat("css.properties.transition-timing-function")}}</p>
+
+<h2 id="看更多">看更多</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">使用 CSS transitions</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/transition/index.html b/files/zh-tw/web/css/transition/index.html
new file mode 100644
index 0000000000..3e5b3c042c
--- /dev/null
+++ b/files/zh-tw/web/css/transition/index.html
@@ -0,0 +1,106 @@
+---
+title: transition
+slug: Web/CSS/transition
+tags:
+  - CSS
+  - CSS Property
+  - CSS轉場
+  - Reference
+translation_of: Web/CSS/transition
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>transition</code></strong> <a href="/zh-TW/docs/Web/CSS" title="CSS">CSS </a>屬性是 {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, and {{ cssxref("transition-delay") }}的 <a href="/zh-TW/docs/Web/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">特性簡寫</a>。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>
+
+
+
+<p>Transitions 讓你可以定義元件在兩個狀態之間切換的轉場效果。兩個不同狀態可以使用<a href="/zh-TW/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">虛擬類別</a> 定義，像是{{cssxref(":hover")}} 或 {{cssxref(":active")}} 亦或是 使用JavaScript設定的狀態變化。</p>
+
+<h2 id="語法"><strong>語法</strong></h2>
+
+<pre class="brush:css no-line-numbers">/* Apply to 1 property */
+/* property name | duration */
+transition: margin-right 4s;
+
+/* property name | duration | delay */
+transition: margin-right 4s 1s;
+
+/* property name | duration | timing function */
+transition: margin-right 4s ease-in-out;
+
+/* property name | duration | timing function | delay */
+transition: margin-right 4s ease-in-out 1s;
+
+/* Apply to 2 properties */
+transition: margin-right 4s, color 1s;
+
+/* Apply to all changed properties */
+transition: all 0.5s ease-out;
+
+/* Global values */
+transition: inherit;
+transition: initial;
+transition: unset;
+</pre>
+
+<p><code>transition</code> 屬性可以包含一個或多個轉場設定，每一項設定都以逗點分開。</p>
+
+<p>每一項設定都描述著每一項屬性所對應的轉場效果(或是<code>all</code> 及 <code>none</code>這兩個特殊值) 。其包含了：</p>
+
+<ul>
+ <li>無或一個對應的屬性名稱。可以是：
+  <ul>
+   <li>關鍵字 <code>none</code></li>
+   <li>關鍵字 <code>all</code></li>
+   <li>以{{cssxref("&lt;custom-ident&gt;")}}命名的CSS屬性。</li>
+  </ul>
+ </li>
+ <li>無或一個{{cssxref("&lt;single-transition-timing-function&gt;")}} 表示所使用的漸變函式。</li>
+ <li>無、一個或兩個{{cssxref("&lt;time&gt;")}} 值。第一個值會被指派給{{cssxref("transition-duration")}}, 而第二個則被指派給{{cssxref("transition-delay")}}。</li>
+</ul>
+
+<p>當每個轉場設定不等長時，請參見 <a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#當_property_value_list_之間並不等長時_..." title="en/CSS/CSS transitions#When property value lists are of different lengths">當property values list 之間不等長時...</a> 。簡而言之，多餘的描述(超過實際被執行的數量)會直接被忽略。</p>
+
+<h3 id="標準語法">標準語法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<p><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS 轉場</a> 有更多範例。</p>
+
+<h2 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 Transitions', '#transition-shorthand-property', 'transition') }}</td>
+   <td>{{ Spec2('CSS3 Transitions') }}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="瀏覽器支援情況">瀏覽器支援情況</h2>
+
+
+
+<p>{{Compat("css.properties.transition")}}</p>
+
+<h2 id="更多資訊">更多資訊</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS轉場</a></li>
+ <li>{{ domxref("TransitionEvent") }}</li>
+</ul>
diff --git a/files/zh-tw/web/css/type_selectors/index.html b/files/zh-tw/web/css/type_selectors/index.html
new file mode 100644
index 0000000000..6a6bb32e89
--- /dev/null
+++ b/files/zh-tw/web/css/type_selectors/index.html
@@ -0,0 +1,79 @@
+---
+title: 元素選擇器
+slug: Web/CSS/Type_selectors
+translation_of: Web/CSS/Type_selectors
+---
+<div>{{CSSRef}}<br>
+<strong>CSS 元素選擇器 （也稱 型態選擇器）</strong>依照 Node 節點名稱選取匹配的 Element 元素。換句話說，此選擇器選取在 Document 文件內所有指定該型態的元素。</div>
+
+<div> </div>
+
+<pre class="brush: css no-line-numbers">/* 全部的 &lt;a&gt; 元素。*/
+a {
+  color: red;
+}</pre>
+
+<h2 id="語法">語法</h2>
+
+<pre class="syntaxbox">element { <em>style properties</em> }
+</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">span {
+  background-color: skyblue;
+}
+</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;span&gt;Here's a span with some text.&lt;/span&gt;
+&lt;p&gt;Here's a p with some text.&lt;/p&gt;
+&lt;span&gt;Here's a span with more text.&lt;/span&gt;
+</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Example', '100%', 150)}}</p>
+
+<h2 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('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>No changes</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.selectors.type")}}</p>
diff --git a/files/zh-tw/web/css/white-space/index.html b/files/zh-tw/web/css/white-space/index.html
new file mode 100644
index 0000000000..eef166cc0e
--- /dev/null
+++ b/files/zh-tw/web/css/white-space/index.html
@@ -0,0 +1,425 @@
+---
+title: white-space
+slug: Web/CSS/white-space
+translation_of: Web/CSS/white-space
+---
+<div>{{CSSRef}}</div>
+
+<p>此 CSS <strong><code>white-space</code></strong> 屬性決定如何處理元素內的空白字元。</p>
+
+<div class="note">
+<p>提醒：如果要讓文字本身斷行，請改用 {{cssxref("overflow-wrap")}}、{{cssxref("word-break")}} 或 {{cssxref("hyphens")}}。</p>
+</div>
+
+<pre class="brush: css no-line-numbers">/* Keyword values */
+white-space: normal;
+white-space: nowrap;
+white-space: pre;
+white-space: pre-wrap;
+white-space: pre-line;
+
+/* Global values */
+white-space: inherit;
+white-space: initial;
+white-space: unset;
+</pre>
+
+<div class="hidden" id="white-space">
+<pre class="brush: html">&lt;div class="grid"&gt;
+&lt;div class="col"&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;normal&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNormal"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-wrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreWrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre-line&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPreLine"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;nowrap&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspNowrap"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="cell"&gt;
+    &lt;div class="label"&gt;pre&lt;/div&gt;
+    &lt;div&gt;
+  &lt;p class="wspPre"&gt;
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Nulla pellentesque metus eget massa feugiat lobortis.
+  &lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div class="note"&gt;
+    Examples above are applied to the following HTML (square represents white spaces):
+    &lt;pre&gt;☐☐&amp;lt;p&amp;gt;
+☐☐☐☐Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+☐☐☐☐Nulla pellentesque metus eget massa feugiat lobortis.
+☐☐&amp;lt;/p&amp;gt;&lt;/pre&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+pre { margin-bottom: 0; }
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.row {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  box-sizing: border-box;
+  margin: .5em;
+  padding: 0;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: center;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: .5em;
+  font: .8em sans-serif;
+  text-align: left;
+  flex: none;
+}
+
+p {
+  width: 50%;
+  font: .8em sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  resize: horizontal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em auto 0;
+  text-align: left;
+}
+
+.wspNormal  { white-space: normal; }
+.wspNowrap  { white-space: nowrap; }
+.wspPre     { white-space: pre; }
+.wspPreWrap { white-space: pre-wrap; }
+.wspPreLine { white-space: pre-line; }</pre>
+</div>
+
+<p>{{EmbedLiveSample("white-space", "100%", 530, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p> <code>white-space</code> 的特性值為下列其中之一。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>連續的空白字元會被合併(collapse)，換行字元被視為空白字元。換行只在被文字空間限制時發生。</dd>
+ <dt><code>nowrap</code></dt>
+ <dd>對待空白字元的方式跟 <code>normal</code> 一樣，且會強制不換行。</dd>
+ <dt><code>pre</code></dt>
+ <dd>連續的空白字元都會被保留。換行在有換行字元以及{{HTMLElement("br")}}時發生。</dd>
+ <dt><code>pre-wrap</code></dt>
+ <dd>連續的空白字元都會被保留。換行會在換行字元、有{{HTMLElement("br")}}元素以及被文字空間限制時發生。</dd>
+ <dt><code>pre-line</code></dt>
+ <dd>連續的空白字元會被合併(collapse)。換行在換行字元、 {{HTMLElement("br")}}以及被文字空間限制時發生。</dd>
+</dl>
+
+<p>下列表格整理了各項 <code>white-space</code> 值的行為：</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th> </th>
+   <th>New lines</th>
+   <th>Spaces and tabs</th>
+   <th>Text wrapping</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th><code>normal</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>nowrap</code></th>
+   <td>Collapse</td>
+   <td>Collapse</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>No wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-wrap</code></th>
+   <td>Preserve</td>
+   <td>Preserve</td>
+   <td>Wrap</td>
+  </tr>
+  <tr>
+   <th><code>pre-line</code></th>
+   <td>Preserve</td>
+   <td>Collapse</td>
+   <td>Wrap</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: css">code {
+  white-space: pre;
+}</pre>
+
+<h3 id="Line_breaks_inside_HTMLElement(pre)_elements">Line breaks inside {{HTMLElement("pre")}} elements</h3>
+
+<pre class="brush: css">pre {
+  word-wrap: break-word;      /* IE 5.5-7 */
+  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
+  white-space: pre-wrap;      /* Modern browsers */
+}</pre>
+
+<h2 id="See_in_action" name="See_in_action">See it in action</h2>
+
+<div class="hidden">
+<pre class="brush: html">    &lt;div id="css-code" class="box"&gt;
+     p { white-space: &lt;select&gt;
+       &lt;option&gt;normal&lt;/option&gt;
+       &lt;option&gt;nowrap&lt;/option&gt;
+       &lt;option&gt;pre&lt;/option&gt;
+       &lt;option&gt;pre-wrap&lt;/option&gt;
+       &lt;option&gt;pre-line&lt;/option&gt;
+     &lt;/select&gt; }
+    &lt;/div&gt;
+    &lt;div id="results" class="box"&gt;
+    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+    &lt;/div&gt;
+</pre>
+
+<pre class="brush: css">.box {
+  width: 300px;
+  padding: 16px;
+  border-radius: 10px;
+}
+
+#css-code {
+  background-color: rgb(220,220,220);
+  font-size: 16px;
+}
+
+#results {
+  background-color: rgb(230,230,230);
+  overflow-x: scroll;
+  height: 400px;
+  white-space: normal;
+  font-size: 14px;
+}</pre>
+
+<pre class="brush: js">var select  = document.querySelector("#css-code select");
+var results = document.querySelector("#results p");
+select.addEventListener("change", function(e) {
+  results.setAttribute("style", "white-space: "+e.target.value);
+})</pre>
+</div>
+
+<h3 id="Source">Source</h3>
+
+<pre>    &lt;p&gt;    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+</pre>
+
+<h3 id="CSS_Result">CSS + Result</h3>
+
+<p>{{ EmbedLiveSample('See_in_action', '80%', '500px') }}</p>
+
+<h2 id="Specifications">Specifications</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 Text', '#propdef-white-space', 'white-space')}}</td>
+   <td>{{Spec2('CSS3 Text')}}</td>
+   <td>Precisely defines the breaking algorithms.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support (<code>normal</code> and <code>nowrap</code>)</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>5.5<sup>[1]</sup></td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>6.0</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+  <tr>
+   <td><code>pre-wrap</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}<br>
+    {{CompatGeckoDesktop("1.9")}}</td>
+   <td>8.0</td>
+   <td>8.0</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td><code>pre-line</code></td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>8.0</td>
+   <td>9.5</td>
+   <td>3.0 (522)</td>
+  </tr>
+  <tr>
+   <td>Support on <code>&lt;textarea&gt;</code></td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("36")}}</td>
+   <td>5.5</td>
+   <td>4.0</td>
+   <td>1.0 (85)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer 5.5+ supports {{Cssxref("word-wrap")}}<code>: break-word;</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Properties that define how words break <em>within themselves</em>: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}, {{cssxref("hyphens")}}</li>
+</ul>
diff --git a/files/zh-tw/web/css/width/index.html b/files/zh-tw/web/css/width/index.html
new file mode 100644
index 0000000000..9459dd32e9
--- /dev/null
+++ b/files/zh-tw/web/css/width/index.html
@@ -0,0 +1,294 @@
+---
+title: width
+slug: Web/CSS/width
+translation_of: Web/CSS/width
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>width</code></strong> CSS property specifies the width of an element. By default, the property defines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>. If {{cssxref("box-sizing")}} is set to <code>border-box</code>, however, it instead determines the width of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">border area</a>.</p>
+
+<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
+width: 300px;
+width: 25em;
+
+/* &lt;percentage&gt; value */
+width: 75%;
+
+/* Keyword values */
+width: 25em border-box;
+width: 75% content-box;
+width: max-content;
+width: min-content;
+width: available;
+width: fit-content;
+width: auto;
+
+/* Global values */
+width: inherit;
+width: initial;
+width: unset;
+</pre>
+
+<div class="hidden" id="width">
+<pre class="brush: html">&lt;div class="grid"&gt;
+  &lt;div class="col"&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;length&amp;gt; values
+      &lt;p class="w1"&gt;width: 150px&lt;/p&gt;
+      &lt;p class="w2"&gt;width: 20em&lt;/p&gt;
+      &lt;p class="w3 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em content-box&lt;/p&gt;
+      &lt;p class="w4 warning" title="this feature is experimental and might not work in your browser"&gt;width: 20em border-box&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      &amp;lt;percentage&amp;gt; values
+      &lt;p class="w5"&gt;width: 75%&lt;/p&gt;
+      &lt;p class="w6 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% content-box&lt;/p&gt;
+      &lt;p class="w7 warning" title="this feature is experimental and might not work in your browser"&gt;width: 75% border-box&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="cell"&gt;
+      Keyword values
+      &lt;p&gt;width: auto&lt;/p&gt;
+      &lt;p class="w8 warning" title="this feature is experimental and might not work in your browser"&gt;width: max-content&lt;/p&gt;
+      &lt;p class="w9 warning" title="this feature is experimental and might not work in your browser"&gt;width: min-content&lt;/p&gt;
+      &lt;p class="w10 warning" title="this feature is experimental and might not work in your browser"&gt;width: available&lt;/p&gt;
+      &lt;p class="w11 warning" title="this feature is experimental and might not work in your browser"&gt;width: fit-content&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p>sd</p>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.grid {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  font: 1em monospace;
+}
+
+.col {
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+}
+
+.cell {
+  margin: .5em;
+  padding: .5em;
+  background-color: #FFF;
+  overflow: hidden;
+  text-align: left;
+  font-style: italic;
+}
+
+p {
+  font-size: 1rem;
+  font-style: normal;
+  background: #E4F0F5;
+  padding: .5em;
+  margin: .5em;
+}
+
+.warning {
+  background: #E4E4E4;
+}
+
+.warning:before {
+  content: "⚠️ ";
+}
+
+/*  values */
+.w1 { width: 150px; }
+.w2 { width: 20em; }
+.w3 { width: 20em content-box; }
+.w4 { width: 20em border-box; }
+
+/*  value */
+.w5 { width: 75%; }
+.w6 { width: 75% content-box; }
+.w7 { width: 75% border-box; }
+
+/* Keyword values (mostly experimental) */
+.w8 { width: max-content; }
+.w9 { width: min-content; }
+.w10 { width: available; }
+.w11 { width: fit-content; }</pre>
+</div>
+
+<div>{{EmbedLiveSample("width", "100%", 660, "", "", "example-outcome-frame")}}</div>
+
+<div class="note">
+<p><strong>注意：</strong> {{cssxref("min-width")}} 和 {{cssxref("max-width")}} 會覆寫 {{cssxref("width")}}.</p>
+</div>
+
+<div>{{cssinfo}}</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>width</code> property is specified as either:</p>
+
+<ul>
+ <li>one of the following keyword values: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li>
+ <li>a <code><a href="#&lt;length>">&lt;length&gt;</a></code> or a <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>. This may optionally be followed by one of the following keywords: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li>
+</ul>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
+ <dd>Defines the width as an absolute value.</dd>
+ <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
+ <dd>Defines the width as a percentage of the containing block's width. If the width of the containing block depends on the width of the element, the resulting layout is undefined.</dd>
+ <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's border box.</dd>
+ <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt>
+ <dd>If present, the preceding {{cssxref("&lt;length&gt;")}} or {{cssxref("&lt;percentage&gt;")}} is applied to the element's content box.</dd>
+ <dt><a id="auto" name="auto"><code>auto</code></a></dt>
+ <dd>The browser will calculate and select a width for the specified element.</dd>
+ <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt>
+ <dd>Use the <code>fill-available</code> inline size or <code>fill-available</code> block size, as appropriate to the writing mode.</dd>
+ <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt>
+ <dd>The intrinsic preferred width.</dd>
+ <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt>
+ <dd>The intrinsic minimum width.</dd>
+ <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt>
+ <dd>The containing block width minus horizontal margin, border and padding.</dd>
+ <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt>
+ <dd>The larger of:
+ <ul>
+  <li>the intrinsic minimum width</li>
+  <li>the smaller of the intrinsic preferred width and the available width</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="範例">範例</h2>
+
+<h3 id="預設寬度">預設寬度</h3>
+
+<pre class="brush:css">p.goldie {
+  background: gold;
+}</pre>
+
+<pre class="brush:html">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+
+<h3 id="像素和相對大小">像素和相對大小</h3>
+
+<pre class="brush: css">.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+</pre>
+
+<pre class="brush: html">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
+&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+
+<h3 id="百分比">百分比</h3>
+
+<pre class="brush: css">.percent {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}</pre>
+
+<pre class="brush: html">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+
+<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+
+<h3 id="內容最大值">內容最大值</h3>
+
+<pre class="brush:css;">p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p>
+
+<h3 id="內容最小值">內容最小值</h3>
+
+<pre class="brush:css">p.minblue {
+  background: lightblue;
+  width: -moz-min-content;    /* Firefox */
+  width: -webkit-min-content; /* Chrome */
+}</pre>
+
+<pre class="brush:html">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+
+<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p>
+
+<h2 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 Box', '#the-width-and-height-properties', 'width')}}</td>
+   <td>{{Spec2('CSS3 Box')}}</td>
+   <td>Added the <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>, <code>border-box</code>, <code>content-box</code> keywords.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Lists <code>width</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Precises on which element it applies to.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
+   <td>{{Spec2('CSS3 Sizing')}}</td>
+   <td>Adds new sizing keywords for width and height.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+
+
+<p>{{Compat("css.properties.width")}}</p>
+
+<h2 id="參考">參考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">box model</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
+</ul>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
commit	218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree	a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/css
parent	074785cea106179cb3305637055ab0a009ca74f2 (diff)
download	translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip