CSS 邊框圖像

CSS 邊框圖像

通過使用 CSS border-image 屬性，可以設置圖像用作圍繞元素的邊框。

CSS border-image 屬性

CSS border-image 屬性允許您指定要使用的圖像，而不是包圍普通邊框。

該屬性有三部分：

  • 用作邊框的圖像
  • 在哪里裁切圖像
  • 定義中間部分應重復還是拉伸

我們將使用這幅圖像（"border.png"）

border-image 屬性接受圖像，并將其切成九部分，就像井字游戲板。然后，將拐角放置在拐角處，并根據您的設置重復或拉伸中間部分。

注意：為了使 border-image 起作用，該元素還需要設置 border 屬性！

此處，重復圖像的中間部分以創建邊框：

圖像作為邊框！

這是代碼：

實例

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

親自試一試

此處，圖像的中間部分被拉伸以創建邊框：

圖像作為邊框！

這是代碼：

實例

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

親自試一試

提示：border-image 屬性實際上是以下屬性的簡寫屬性：

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - 不同的裁切值

不同的裁切值會完全改變邊框的外觀：

實例 1：

border-image: url(border.png) 50 round;

實例 2：

border-image: url(border.png) 20% round;

實例 3：

border-image: url(border.png) 30% round;

這是代碼：

實例

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

親自試一試

CSS 邊框圖像屬性

屬性 描述
border-image 用于設置所有 border-image-* 屬性的簡寫屬性。
border-image-source 規定用作邊框的圖像的路徑。
border-image-slice 規定如何裁切邊框圖像。
border-image-width 規定邊框圖像的寬度。
border-image-outset 規定邊框圖像區域超出邊框盒的量。
border-image-repeat 規定邊框圖像應重復、圓角、還是拉伸。