# The `border-image` CSS property
border-image 是以下屬性的速記版
| properties | 說明 |
| -------- | ---------------- |
| border-image-source | 指定要作為匡線的圖片來源, url|
| border-image-slice | 作為匡線的圖片切割方式|
| border-image-width | 要填入匡線圖的元件的四邊寬度
| border-image-repeat | 四邊的重複方式|
| border-image-outset | 使用匡線圖的元件四邊外擴值|
---
## **border-image-source**
url, 漸層, 關鍵字 `none`
### 語法範例
```
/* 用 url 指定圖檔 */
border-image-source: url(image.jpg);
/* 設定漸層 */
border-image-source: linear-gradient(to top, red, yellow);
/* 關鍵字 */
border-image-source: none;
```
---
## **border-image-slice**
設定 `border-image-source` 的裁切位置。
裁切方式如下圖所示。兩條水平線、兩條垂直線（紅色虛線）將圖切分為９個區。
* 1, 2, 3, 4 區填入元件的四個角，不重複；
* 5, 6, 7, 8 區填入元件的四個邊，可設定重複方式；
* 第 9 區預設不使用，但可以 `fill` 關鍵字作為元件內容的背景。
`border-image-slice` 裁切方式說明圖
### 語法範例
```
/* 單值：四邊等距 */
border-image-slice: 30%;
/* 雙值：上、下邊等距 | 左、右邊等距 */
border-image-slice: 10% 30%;
/* 三值：上 | 左、右 | 下 */
border-image-slice: 30 30% 45;
/* 四值：四邊分別設定，依序為 上、右、下、左 */
border-image-slice: 7 12 14 5;
/* 使用 `fill` 關鍵字 */
border-image-slice: 10% fill;
border-image-slice: fill 10%;
```
#### Values 格式說明
| 指定值的格式 | 說明 |
| --- | --- |
| 單值（one position） |四邊等距。|
| 雙值（two positions） |第一個值設定上、下邊距，第二個值設定左、右邊距。|
| 三值（three positions）|第一個值設定上邊距，第二個值設定左、右邊距，第三個值設定下邊距。|
| 四值（four positions） |依序分別設定上、右、下、左邊距。|
### Values
* 無單位數字：標記從原始圖檔四邊的位移 pixels 量。只有數字，不標單位。
* 百分比：是以 `border-image-source` 圖的寬或高為100%，從四邊算起的位移量。如果使用向量圖作為 `border-image-source`，% 較合適。
* `fill`：中間區當成背景圖，會疊在真正的 background 之上。
* 最大值是 100% 或原圖的寬和高，超過以 100% 計。不可使用負值。
* 初始值：100%
---
## **border-image-width**
設定要使用 border image 的元件的四邊寬度，用以填入 `border-image-source` 指定的圖。
### 語法範例
```
/* 長度（有單位的數字） */
border-image-width: 1rem;
/* 百分比 */
border-image-width: 25%;
/* 無單位的數字 */
border-image-width: 3;
/* 上、下使用相同寬度 | 左、右使用相同寬度 */
border-image-width: 2em 3em;
/* 上 | 左、右 | 下 */
border-image-width: 5% 15% 10%;
/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;
/* 使用關鍵字 */
border-image-width: auto;
```
#### Values 格式說明
| 指定值的格式 | 說明 |
| --- | --- |
| 單值 (one value) | 四邊等寬|
| 雙值 (two values) | 第一個值是上和下，第二個值是左和右。也就是上下等寬，左右等寬。|
| 三值 (three values) | 第一個值是上 border 寬，第二個值是左和右 border 的寬，第三個值是下 border 寬。 |
| 四值 (four values) | 依序為上、右、下、左 border 的寬度（順時鐘方向）。|
### Values
* 百分比：元件寬或高的百分比
* 無單位數字：表示 border-width 的倍數
* 有單位數字：px, em 等
* 關鍵字：auto
* 預設值：1（注意：沒有單位，意思是 border-width 的一倍）
### 範例
[MDN 的範例](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width#examples)（手動向下捲到 **Examples**）
---
## **border-image-repeat**
定義 `border-image-source` 指定的圖的四邊（edge regions，參考 [border-image-slice 說明圖](#border-image-slice)的 5,6,7,8 四區）如何填入元件的四個邊。
### 語法範例
```
/* 關鍵字 */
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
border-image-repeat: space;
/* 上和下 round | 左和右 stretch */
border-image-repeat: round stretch;
```
#### Values 格式說明
| 指定值的格式 | 說明|
|:---:| ---------------------------------------------------------- |
|單值| 四邊使用相同的重複方式|
|雙值| 第一個值是上和下邊的重複方式，第二個值是左和右的重複方式。 |
*＊無法指定單一邊的重複方式。*
### Values
* stretch：不重複，延伸變形至填滿。
* repeat：重複貼圖。元件邊長無法被「切出來的小圖（border-image-slice 切出來的 5、6、7、8區）」長度整除時，會有裁切的情況。
* round：重複貼圖。不能整除時，「單位圖」放大或縮小以填滿。
* space：重複貼圖。不能整除時，「單位圖」之間平均留空。
---
## **border-image-outset**
設定元件用以填入 border image 的外擴距離。從元件的 border box 往外算。
* 單值、雙值、三值、四值的語法參考 [`border-image-width`](#Values-格式說明1) 的說明。
* outset 區不會觸發 overflow scrollbars，也不會感應滑鼠事件。
* 不可使用負值，負值會導致 border-image-outset 的宣告失效
### 語法範例
```
/* 單一長度值 */
border-image-outset: 1rem;
/* 單一無單位數字 */
border-image-outset: 1.5;
/* top and bottom | left and right */
border-image-outset: 1 1.2;
/* top | left and right | bottom */
border-image-outset: 30px 2 45px;
/* top | right | bottom | left */
border-image-outset: 7px 12px 14px 5px;
```
### Values
* 長度：有 em, px 等長度單位的數字
* 無單位數字：表示其相對應的 `border-width` 的倍數。例如：
`border-width: 1em 2px 0 1.5rem;`
`border-image-outset: 2;`
實際算出來的 `border-image-outset` 是 `2em 4px 0 3rem`
---
## **border-image**
### 語法範例
```
/* 圖檔來源 | 裁切方式 */
border-image: linear-gradient(red, blue) 27;
/* 圖檔來源 | 裁切方式 | 重複方式 */
border-image: url("/images/border.png") 27 space;
/* 圖檔來源 | 裁切方式 | 元件邊寬 */
border-image: linear-gradient(red, blue) 27 / 35px;
/* 圖檔來源 | 裁切方式 | 元件邊寬 |元件邊界外擴 | 重複方式 */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
```
#### 上方語法範例中，註解文字與 css properties 對照
* 圖檔來源：border-image-source
* 裁切方式：border-image-slice
* 重複方式：border-image-repeat
* 元件邊寬：border-image-width
* 元件邊界外擴：border-image-ourset
### 無障礙
無障礙輔助技術無法解析 border images，不要在 border images 放置重要資訊。
### 初始值
* border-image-source: none
* border-image-slice: 100%
* border-image-width: 1
* border-image-outset: 0
* border-image-repeat: stretch
### 範例
[MDN 範例](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image#examples)（手動向下捲到 **Examples**）
---
## 限制
＊使用 border-image 的元件 border-radius 會失效。需要同時有漸層和圓角效果的 border 可用其他技巧，例如 background-clip。
Sign in with Wallet
Connect another wallet