border-image
============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
CSS 屬性 `border-image` 可以讓你在元素的邊框上擺上圖片。這讓呈現看似很複雜的一個網頁的小單元簡單很多，它可以省最多九個元素。

**警告：** 官方的 CSS3 規範描述的 border-image 屬性在這個功能被凍結並出現在 Gecko 1.9.1 的釋出版之後改變很多。因此，這項功能的語法跟呈現方法很可能在未來 Gecko 的釋出版改變。特別是選擇性的 `border-width` 參數，它覆蓋既有 `border-width` 取值的這項特性已經從規範移除了，因此勢必也會在未來的 Gecko 被拿掉。

瀏覽器會顯示 `border-image` 指定的圖片而不是 `border-style` (en-US) 給的邊框樣式，但是若它的取值是 `none` 或是因某些理由無法顯示該圖片，瀏覽器就會顯示邊框樣式。`border-image` 會畫一個額外的背景圖片在原來 `background-image` (en-US) 指定的背景圖片之上。

語法
--
```

none |
  [ <圖片> [ <數字> | <百分比> ]{1,4} [/ <邊框寬度>{1,4}]? ] && [ stretch | repeat | round ]{0,2}
```

取值
--

none

不顯示圖片，使用邊框樣式。

<圖片>（必填）

圖片值是一個 `<uri>()` (en-US)，例：`url(http://example.org/image.png)`。

<數> | <百分比>（必填）

一個、兩個、三個、四個分別代表從頂邊、右邊、底邊、左邊從圖片外圍到切圖線的距離，將圖片切為九塊：四個角、四個邊跟一個中間部份。

 一個值的話，該值用於圖片的全部四個邊。
 兩個值得話，值用於：一、頂邊與底邊 二、右邊與左邊。
 三個值的話，值用於：一、頂邊 二、右邊與左邊 三、底邊。
 四個值的情況，四個值分邊用在圖片的頂邊、右邊、底邊、左邊。


在 Gecko 1.9.1 (Firefox 3.5) 圖片的中間那個部份會被當做元素的背景。這在未來的版本可能會改變。

**百分比** 由圖片的長度/寬度計算。
 **數** 但表圖片的像素（若為點陣圖）或向量座標（若為 SVG）。


<邊框寬度> （選擇性）

如果斜線 **/** 出現在屬性值的話，一個、兩個、三個或是四個在它之後的取值會被當成是 `border-width` (en-US) 的取值使用。取值的順序如同 `border-width` (en-US) 。

stretch | round | repeat （選擇性）

一個或兩個關鍵字，指定邊上的圖片跟中間部份要如何縮放及鋪擺。

**`stretch`**（預設值）縮放該圖片，使其與配置大小相等。
 **`round`** 鋪擺該圖片，但也縮放它使得被配置範圍鋪滿整數張該圖片。
 **`repeat`** 直接鋪擺該圖片。
 第一個關鍵字的對象是頂邊，中間跟底邊的圖片，而第二個關鍵字的對象是左邊跟右邊的邊框。如果第二個不存在，則沿用第一個關鍵字的設定。如果兩者皆不存在，預設值為 `stretch`。


形式定義
----

|  |  |
| --- | --- |
| 預設值 (en-US) | as each of the properties of the shorthand:* `border-image-source` (en-US): `none`
* `border-image-slice` (en-US): `100%`
* `border-image-width` (en-US): `1`
* `border-image-outset` (en-US): `0`
* `border-image-repeat` (en-US): `stretch`
 |
| Applies to | all elements, except internal table elements when `border-collapse` (en-US) is `collapse`. It also applies to `::first-letter`. |
| 繼承與否 | no |
| Percentages | as each of the properties of the shorthand:* `border-image-slice` (en-US): refer to the size of the border image
* `border-image-width` (en-US): refer to the width or height of the border image area
 |
| Computed value (en-US) | as each of the properties of the shorthand:* `border-image-outset` (en-US): as specified, but with relative lengths converted into absolute lengths
* `border-image-repeat` (en-US): as specified
* `border-image-slice` (en-US): one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
* `border-image-source` (en-US): `none` or the image with its URI made absolute
* `border-image-width` (en-US): as specified, but with relative lengths converted into absolute lengths
 |
| Animation type | as each of the properties of the shorthand:* `border-image-outset` (en-US): by computed value type
* `border-image-repeat` (en-US): discrete
* `border-image-slice` (en-US): by computed value type
* `border-image-source` (en-US): discrete
* `border-image-width` (en-US): by computed value type
 |

形式語法
----
```

border-image =   
  <'border-image-source'>                             || (en-US)  
  <'border-image-slice'> [ (en-US) / <'border-image-width'> | (en-US) / <'border-image-width'>? (en-US) / <'border-image-outset'> ] (en-US)? (en-US)  || (en-US)  
  <'border-image-repeat'>                               
  
```

範例
--

[這裡還需要一些活範例]
```

#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; }
```


```
/* 鮮見例，在 Firefox 3.5 下看起來像是完全伸展的 background-image */

 div     { -moz-border-image: url(bgimage.png) 0; }
```

規範
--

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image |

瀏覽器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.