unslug zh-tw: move

1 files changed, 111 insertions, 0 deletions

diff --git a/files/zh-tw/orphaned/web/css/border-image/border-image/index.html b/files/zh-tw/orphaned/web/css/border-image/border-image/index.html
new file mode 100644
index 0000000000..210a2663eb
--- /dev/null
+++ b/files/zh-tw/orphaned/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>