影像邊框 border-image

元素的邊框除了基本的樣式和顏色，也可以使用「影像」作為邊框，這篇教學會介紹 border-image、border-image-slice、border-image-repeat 等邊框影像的樣式屬性，運用豐富的影像素材，讓邊框更加特別，最後還會運用影像邊框，實作「波浪形狀」的邊框效果。

請先閱讀：邊框 border

快速導覽：

border-image-source 邊框的影像來源

border-image-slice 邊框的影像切片

border-image-repeat 邊框的影像重複

border-image-outset 邊框的影像擴展範圍

border-image-width 邊框的影像寬度

border-image 影像邊框縮寫格式

波浪造型邊框效果

CSS 教學 - 影像邊框 border-image

border-image-source 邊框的影像來源

如果元素具有較寬的邊框，可以使用 border-image-source 設定邊框的背景圖片，用法和 background-image 完全相同，支援 jpg、gif、webp、png、svg 等常見的影像格式，也支援使用 CSS 漸層色函式產生的漸層色，寫法如下：

影像邊框不支援 border-collapse: collapse; 的表格元素。

div {
  border-image-source: url("圖片網址");
}

在單純使用 border-image-source 且沒有搭配其他樣式的狀況下，執行結果會將圖片填滿「四個角落」，且會將影像強制縮放為「正方形」，下方範例會呈現使用外部 jpg、svg 和內嵌 svg 的做法，並用淺灰色背景凸顯元素範圍。

線上展示：https://codepen.io/oxxo/pen/qBGezPP

<!-- HTML 程式碼 -->
<div class="a">使用外部 jpg</div>
<div class="b">使用外部 svg</div>
<div class="c">使用內嵌 svg</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 5px;
    box-sizing:border-box;
    border: 50px solid #000;
    background: #eee;
    float: left;
  }
  .a {
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-1.jpg");
  }
  .b {
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-svg-1.svg");
  }
  .c {
    border-image-source: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 237 237" style="enable-background:new 0 0 237 237;" xml:space="preserve"><g><rect style="fill:%23FF5F5F;" width="79" height="79"/></g><g><rect x="79" style="fill:%23FFBD52;" width="79" height="79"/></g><g><rect x="158" style="fill:%2389FF00;" width="79" height="79"/></g><g><rect y="79" style="fill:%231B9E00;" width="79" height="79"/></g><g><rect x="79" y="79" style="fill:%237BCAFF;" width="79" height="79"/></g><g><rect x="158" y="79" style="fill:%230019FF;" width="79" height="79"/></g><g><rect y="158" style="fill:%23B440FF;" width="79" height="79"/></g><g><rect x="79" y="158" style="fill:%23CCCCCC;" width="79" height="79"/></g><g><rect x="158" y="158" style="fill:%233D3D3D;" width="79" height="79"/></g></svg>');
  }
</style>

CSS 教學 - 影像邊框 border-image - border-image-source 邊框的影像來源

使用影像邊框後，元素邊框會有下列幾種有特性：

忽略邊框顏色：border-color 相關樣式失效。

不會被邊框圓角裁切：邊框的影像覆蓋在元素上，反而會覆蓋在邊框圓角上方。

下方的範例雖然有套用了邊框圓角效果，但因為使用了影像邊框，如果是「全部填滿」的影像邊框，圓角效果看起來就像是沒有作用，如果是「背景透明」的影像邊框，就可以觀察到邊框圓角效果。

線上展示：https://codepen.io/oxxo/pen/KKLOjyw

<!-- HTML 程式碼 -->
<div class="a">hello apple</div>
<div class="b">hello banana</div>
<div class="c">hello oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 10px;
    box-sizing:border-box;
    border: 50px solid #000;
    background: orange;
    float: left;
    border-radius: 80px;
  }
  .a {border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-1.jpg");}
  .b {border-image-source: url("https://steam.oxxostudio.tw/download/css/border-svg-2.svg");}
  .c {
    border-radius: 50px;   /* 把邊框圓角半徑變小 */
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-1.jpg");
  }
</style>

CSS 教學 - 影像邊框 border-image - 使用影像邊框後，元素邊框幾種有特性

border-image-slice 邊框的影像切片

border-image-slice 樣式屬性會將作為邊框影像的圖片，透過「切片」的方式分割成「九宮格」，九宮格的每個格子按照下圖，分別對應元素容器和邊框組成的九宮格：

CSS 教學 - 影像邊框 border-image - 透過「切片」的方式分割成「九宮格」

border-image-slice 撰寫語法和 border 相似，使用單一數值 ( 無單位 ) 或使用空白分隔多個數值，最後也可以加入 fill 關鍵字。

/* 使用 1～4 個數值 */
div {
  border-image-slice: (上下左右);
  border-image-slice: (上下) (左右);
  border-image-slice: 上 (左右) 下;
  border-image-slice: 上 右 下 左;
}
/* 使用 1～4 個數值，最後加上 fill 關鍵字 */
div {
  border-image-slice: (上下左右) fill;   
  border-image-slice: (上下) (左右) fill;
  border-image-slice: 上 (左右) 下 fill;
  border-image-slice: 上 右 下 左 fill;
}

屬性數值表示「切片的長度」，意思為圖片指定位置切片「往中心點」的 x y 移動距離，支援數字和百分比兩種：

屬性值	說明
數字	必須「無單位」數字，但實際單位為 px。
% ( 預設值，100% )	乘以圖片原始寬度的百分比。
fill ( 關鍵字 )	預設不使用，表示不會用邊框填滿元素內容，使用後會九宮格的中間區域填滿元素內容。

下方的例子使用一張 300x300 九宮格正方形的九色圖片，設定不同切片數字後會對應到不同的套用結果 ( 圖片的左側是圖片切片的對照 )。

線上展示：https://codepen.io/oxxo/pen/RwmXzjY

<!-- HTML 程式碼 -->
<div class="a">apple</div>
<div class="b">banana</div>
<div class="c">coconut</div>
<div class="d">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 10px;  
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  .a {border-image-slice: 100;}
  .b {border-image-slice: 100 50;}
  .c {border-image-slice: 100 50 20;}
  .d {border-image-slice: 100 50 20 10;}
</style>

CSS 教學 - 影像邊框 border-image - 設定不同切片數字

從上圖可以看出，如果將「非正方形」的切片套用到正方形的區域，就會發生拉伸變形的狀況，同理如果將「正方形」切片套用到長方形的區域，也會發生拉伸變形的狀況，下方範例將正方形九宮格的切片圖案，套用到長方形容器的影像邊框，除了四個正方形的角落，其他四個方向的邊緣都會出現拉伸或壓縮的狀況 ( 如果是點陣圖，將小圖片到用到大容器時，還會發生解析度不足的狀況 )

線上展示：https://codepen.io/oxxo/pen/ZENgdvO

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 10px;
    padding: 10px;  
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    border-image-slice: 100;
  }
  .a {
    width: 300px;
    height: 150px;
  }
  .b {
    width: 100px;
    height: 300px;
  }
</style>

CSS 教學 - 影像邊框 border-image - 將「正方形」切片套用到長方形的區域

通常設定切片時，必須注意「切片總尺寸」必須小於「圖片尺寸」( 寬高分開計算 )，不然就會發生「無法切出圖片」的空白狀況，對應的邊框也就不會有影像，相關規則如下：

狀況	邊框四個角	邊框四個邊
圖片尺寸 > 切片總尺寸	填滿切片	填滿切片
圖片尺寸 <= 切片總尺寸	填滿切片	空白

下方範例的前兩個 div 的切片總尺寸都小於圖片尺寸，所以可以正常計算出影像邊框的圖片，但後兩個 div 因為切片總尺寸太大，部分邊框無法計算出要套用的圖片尺寸，就會保留空白 ( 範例使用一個 span 作為實際內容區域 )。

線上展示：https://codepen.io/oxxo/pen/vYwoqda

<!-- HTML 程式碼 -->
<div class="a"><span>apple</span></div>
<div class="b"><span>banana</span></div>
<div class="c"><span>coconut</span></div>
<div class="d"><span>oxxo</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 20px;
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: yellow;
    box-sizing:border-box;
  }
  .a {border-image-slice: 140;}             /* 140+140 < 300 */
  .b {border-image-slice: 100 249 100 50;}  /* 249+50 < 300 */
  .c {border-image-slice: 500;}             /* 500+500 > 300 */
  .d {border-image-slice: 100 250;}         /* 250+250 > 300 */
</style>

CSS 教學 - 影像邊框 border-image - 切片總尺寸都小於圖片尺寸

如果使用「百分比」為單位，表示「原始圖片的尺寸的百分比」，使用方法和使用數字差不多，但因為是以百分比為單位，就不需要去知道原始圖片尺寸，只要注意不要超過 50% 就都可以正常顯示 ( 裁切總尺寸如果等於圖片尺寸，仍然無法正常切片 )。

線上展示：https://codepen.io/oxxo/pen/NWVQZyQ

<!-- HTML 程式碼 -->
<div class="a"><span>apple</span></div>
<div class="b"><span>banana</span></div>
<div class="c"><span>coconut</span></div>
<div class="d"><span>oxxo</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
      width: 200px;
      height: 200px;
      margin: 20px;
      box-sizing:border-box;
      border: 50px solid #000;
      border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    }
    span {
      display: block;
      width: 100%;
      height: 100%;
      padding: 10px;
      background: yellow;
      box-sizing:border-box;
    }
    .a {border-image-slice: 33.3%;}   /* 33.3% + 33.3% < 100%  */
    .b {border-image-slice: 25% 10%;} /* 25% + 25% < 100%  */
    .c {border-image-slice: 50%;}     /* 50% + 50% = 100%  */
    .d {border-image-slice: 100%;}    /* 100% + 100% > 100%  */
</style>

CSS 教學 - 影像邊框 border-image - 使用百分比為單位

border-image-slice 預設會將內容的部分「留空」，如果加上 fill 關鍵字，則會將切片後九宮格正中間的切片，填滿內容區域，不過如果元素有內容，內容會覆蓋在邊框之上 ( 邊框覆蓋在背景色之上 )，此外，如果切片總尺寸大於圖片尺寸，中間區域就會像四個邊緣一樣呈現空白。

線上展示：https://codepen.io/oxxo/pen/MWdNMVe

<!-- HTML 程式碼 -->
<div class="a"><span></span></div>
<div class="b"><span></span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 20px;
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
  }
  span {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #ff0a;     /* 使用半透明黃色，凸顯內容 */
    box-sizing:border-box;
  }
  .a {border-image-slice: 33.33% fill;}
  .b {border-image-slice: 25% 10% fill;}
</style>

CSS 教學 - 影像邊框 border-image - fill 關鍵字

border-image-repeat 邊框的影像重複

border-image-repeat 可以設定影像邊框四周影像的「重複模式」，有下列幾個屬性值：

屬性值	說明
stretch	預設值，每個區域套用一個切片，「不等比例」縮放切片填滿區域。
repeat	「等比例」縮放並重複切片直到填滿區域 ( 切片可能會被截斷 )。
round	「不等比例」縮放並重複切片直到填滿區域 ( 切片不會被截斷 )。
space	「等比例」縮放並重複切片，搭配「空白」填滿區域 ( 切片不會被截斷 )。

下面使用四個 div 和同一張邊框影像，呈現不同重複模式的效果。

線上展示：https://codepen.io/oxxo/pen/oNRKrqq

<!-- HTML 程式碼 -->
<div class="a">border-image-repeat: stretch;</div>
<div class="b">border-image-repeat: repeat;</div>
<div class="c">border-image-repeat: round;</div>
<div class="d">border-image-repeat: space;</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 370px;
    height: 180px;
    margin: 5px;
    padding: 10px;
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    border-image-slice: 100;
  }
  .a {border-image-repeat: stretch;}
  .b {border-image-repeat: repeat;}
  .c {border-image-repeat: round;}
  .d {border-image-repeat: space;}
</style>

CSS 教學 - 影像邊框 border-image - border-image-repeat 邊框的影像重複

border-image-outset 邊框的影像擴展範圍

border-image-outset 可以設定邊框影像向外的「擴展範圍」，設定後會將影像邊框往外推，不過這個樣式不會影響容器和其他容器的關係，也不會影響容器的行高，純粹只影響顯示的「樣式」。

border-image-outset 的屬性值使用「具有長度單位」或「不具有單位」的數字，並且和 border-width 一樣，也有支援 1～4 個數值的寫法。使用的單位如下：

屬性值單位	說明
沒有單位	border-width 的幾倍。
px	像素。
em	元素本身字型大小的幾倍。
rem	根元素字型大小的幾倍。
pt、cm、mm、in	印刷單位。

下方範例會呈現不同 border-image-outset 產生的擴展效果，可以看到雖然 div 的前後有 span 元素，但擴展範圍不會影響其他元素。

線上展示：https://codepen.io/oxxo/pen/QWReXrw

<!-- HTML 程式碼 -->
<div class="a"><span></span></div>
<span>hello world, I am oxxo!!</span>
<br>
<div class="b"><span></span></div>
<span>hello world, I am oxxo!!</span>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 20px 40px;
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    border-image-slice: 100;
  }
  div span {
    display: block;
    width: 100%;
    height: 100%;
    background: yellow;
  }
  .a {
    border-width: 20px 40px 60px 80px;
    border-image-outset: 0.5;   /* 10px 20px 30px 40px */
  }
  .b {
    border-image-outset: 30px;
  }
</style>

CSS 教學 - 影像邊框 border-image - border-image-outset 邊框的影像擴展範圍

border-image-width 邊框的影像寬度

border-image-width 可以設定邊框的「影像寬度」，通常使用影像邊框時，預設都會將影像「填滿」邊框，但運用這個樣式就能設定影像的尺寸，進而產生「裁切」或「留白」的效果，如果影像寬度小於邊框寬度就會留白，如果大於邊框寬度就會裁切，最大的影像寬度為元素寬高的一半。

border-image-width 的屬性值使用「具有長度單位」或「不具有單位」的數字，和 border-width 一樣，也支援 1～4 個數值的寫法。使用的單位如下：

屬性值單位	說明
沒有單位	border-width 的幾倍。
px	像素。
%	元素對應方向的寬度或高度。
em	元素本身字型大小的幾倍。
rem	根元素字型大小的幾倍。
pt、cm、mm、in	印刷單位。

下方範例使用不同的 border-image-width 數值呈現不同效果。

線上展示：https://codepen.io/oxxo/pen/ZENgdop

<!-- HTML 程式碼 -->
<div class="a"><span></span></div>
<div class="b"><span></span></div>
<div class="c"><span></span></div>
<div class="d"><span></span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 30px;
    box-sizing:border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
    border-image-slice: 100;
  }
  div span {
    display: block;
    width: 100%;
    height: 100%;
    background: yellow;
  }
  .a {border-image-width: 10%;}  /* 200px x 10 = 20px */
  .b {border-image-width: 20px;}
  .c {border-image-width: 20px 50px; }
  .d {border-image-width: 80px;}
</style>

CSS 教學 - 影像邊框 border-image - border-image-width 邊框的影像寬度

border-image 影像邊框縮寫格式

如果不要一個一個樣式的設定影像邊框，也可以使用 border-image 撰寫縮寫格式，縮寫格式的樣式會包含上述各個樣式，撰寫規則如下：

屬性值	是否必要	分隔符號	按照順序
`border-image-source`	必要	空白	不用按照順序
`order-image-repeat`	非必要，預設 stretch	空白	不用按照順序
`border-image-slice`	非必要，預設 100%	/	按照順序，順序 1
`border-image-width`	非必要，預設 1	/	按照順序，順序 2
`border-image-outset`	非必要，預設 0	/	按照順序，順序 3

border-image 撰寫語法如下，需要按照順序的屬性值必須按照寫法順序撰寫。

div {
  border-image: border-image-source border-image-slice / border-image-width / border-image-outset border-image-repeat;
}

下方的範例會使用四個 div，透過不同的 border-image 撰寫方式，產生四種截然不同的效果 ( 同一張圖片 )。

線上展示：https://codepen.io/oxxo/pen/xxNvojX

<!-- HTML 程式碼 -->
<div class="a"><span>apple</span></div>
<div class="b"><span>banana</span></div>
<div class="c"><span>coconut</span></div>
<div class="d"><span>oxxo</span></div>

<!-- CSS 程式碼 -->
<style>
 div {
    width: 200px;
    height: 200px;
    margin: 30px;
    box-sizing: border-box;
    border: 50px solid #000;
    float: left;
  }
  div span {
    display: block;
    width: 100%;
    height: 100%;
    background: yellow;
  }
  .a {border-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg") 100;}
  .b {border-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg") 120 repeat;}
  .c {border-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg") 100 50 / 50px / 5px;}
  .d {border-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg") 50 30 fill / 10px / 10px 5px space;}
</style>

CSS 教學 - 影像邊框 border-image - border-image 影像邊框縮寫格式

波浪造型邊框效果

下方範例會利用波浪造型的圖片，搭配 border-image-slice 和 border-image-repeat 的方式，做出波浪造型的邊框 ( 類似郵票 )。

線上展示：https://codepen.io/oxxo/pen/vYwoqjz

<!-- HTML 程式碼 -->
<div class="a"><span>apple</span></div>
<div class="b"><span>banana</span></div>
<div class="c"><span>coconut</span></div>
<div class="d"><span>oxxo</span></div>

<!-- CSS 程式碼 -->
<style>
 div {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    border: 50px solid #000;
    border-image-source: url("https://steam.oxxostudio.tw/download/css/border-svg-3.svg");
    border-image-slice: 33.33% 38% 44.3%;
    border-image-width: 1 1 1.3 1;
    border-image-repeat: round;
    float: left;
  }
  div span {
    display: block;
    width: 100%;
    height: 100%;
    background: yellow;
  }
  .a {width: 300px;}
  .b {height: 300px;}
  .c {border-width: 20px;}
  .d {
    width: 100px;
    height: 100px;
    border-width: 20px;
  }
</style>

CSS 教學 - 影像邊框 border-image - 波浪造型邊框效果

小結

影像邊框的樣式大概是 border 相關樣式中最為複雜的，同時也是需要理解圖像和切片概念才能操作的樣式，不過一但熟悉之後，就會是最容易做出特殊效果的樣式。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

影像邊框 border-image

border-image-source 邊框的影像來源

border-image-slice 邊框的影像切片

border-image-repeat 邊框的影像重複

border-image-outset 邊框的影像擴展範圍

border-image-width 邊框的影像寬度

border-image 影像邊框縮寫格式

波浪造型邊框效果

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩