1. Web
  2. CSS
  3. border-image

border-image

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

border-image 這個 CSS 屬性可以在指定元素的周圍繪製圖像，並替換掉元素常規的 border。

試一試

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /
  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)
  60;

<section id="default-example">
  <div id="example-element">This is a box with a border around it.</div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background: #fff3d4;
  color: black;
  border: 30px solid;
  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30
    round;
  font-size: 1.2em;
}

備註： 你應該額外指定一個 border-style，以防邊框影像載入失敗。儘管規範沒有嚴格要求，但如果 border-style 的值為 none 或 border-width 的值為 0，某些瀏覽器將不會渲染邊框影像。

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css
/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

/* Global values */
border-image: inherit;
border-image: initial;
border-image: revert;
border-image: revert-layer;
border-image: unset;

border-image 屬性可以指定下面列出的一個到五個值。

備註： 如果 border-image-source 的計算值是 none，或者影像無法顯示，將會顯示 border-style 的樣式。

值

<'border-image-source'>

源影像。見 border-image-source。

<'border-image-slice'>

將源影像切割成區域的尺寸。最多可以指定四個值。見 border-image-slice。

<'border-image-width'>

邊框影像的寬度。最多可以指定四個值。見 border-image-width。

<'border-image-outset'>

邊框影像與元素外邊緣的距離。最多可以指定四個值。見 border-image-outset。

<'border-image-repeat'>

定義如何調整源影像的邊緣區域以適應邊框影像的尺寸。最多可以指定兩個值。見 border-image-repeat。

無障礙

輔助技術無法解析邊框影像。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式對其進行描述。

正式定義

初始值作為簡寫中的每個屬性
應用於所有元素，但在 border-collapse 為 collapse 時，內部表格元素除外。該屬性也適用於 ::first-letter。
繼承性否
百分比作為簡寫中的每個屬性
計算值作為簡寫中的每個屬性
動畫型別作為簡寫中的每個屬性

正式語法

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

<border-image-width> = 
  [ <length-percentage [0,∞]> | <number [0,∞]> | auto ]{1,4}  

<border-image-outset> = 
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}  

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<length-percentage> = 
  <length>      |
  <percentage>  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

示例

點陣圖

在此示例中，我們將為元素的邊框應用菱形圖案。邊框影像的源是一個 81x81 畫素的“.png”檔案，其中垂直和水平方向各有三個菱形。

Eight diamonds: four red diamonds, one in each corner, and four orange diamonds, one on each side. The middle is empty.

HTML

html
<div id="bitmap">
  This element is surrounded by a bitmap-based border image!
</div>

CSS

為了匹配單個菱形的大小，我們將使用 81 除以 3 的值，即 27，來將影像切割成角落和邊緣區域。為了使邊框影像在元素背景的邊緣居中，我們將外擴（outset）值設為寬度值的一半。最後，round 的重複值將使邊框切片均勻適配，即不會出現裁剪或間隙。

css
#bitmap {
  width: 200px;
  background-color: #ffffaa;
  border: 36px solid orange;
  margin: 30px;
  padding: 10px;

  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px
    round;
}

結果

漸變

HTML

html
<div id="gradient">
  This element is surrounded by a gradient-based border image!
</div>

CSS

css
#gradient {
  width: 200px;
  border: 30px solid;
  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)
    60;
  padding: 20px;
}

結果

圓角邊框

border-radius 對邊框影像沒有影響。這是因為 border-image-outset 能夠將影像放置在邊框盒之外，所以邊框影像被邊框區域裁剪是沒有意義的。在使用邊框影像時建立圓角邊框，你應該用圓角來建立影像本身，或者在漸變的情況下，將其繪製為背景。下面我們展示了一種實現方法，即使用兩個 background-image：一個擴充套件到邊框盒，另一個用於內邊距盒。

HTML

html
<div id="rounded">
  This element is surrounded by a border image with rounded corners!
</div>

CSS

css
#rounded {
  width: 200px;
  /* Use transparent so the background image is visible */
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

結果

備註： 有一個新的 background-clip: border-area 值正在被提議，以解決此用例。

規範

規範
CSS Backgrounds and Borders Module Level 3
# border-image

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面的最後修改時間是 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.