以前，為網(wǎng)頁(yè)添加裝飾性元素（如花哨的邊框）需要切片圖像，並耐心調(diào)整 CSS 代碼，直到效果滿意為止。

現(xiàn)在，CSS 簡(jiǎn)化了這一過程。只需幾行代碼，即可為您的網(wǎng)站添加相當(dāng)複雜的邊框。本文將向您展示如何做到這一點(diǎn)。

要點(diǎn)

• CSS 允許僅用幾行代碼即可為網(wǎng)頁(yè)添加複雜的邊框，包括使用 border-image-source 屬性在邊框上添加背景圖像。
• border-image-slice 屬性將選定的圖像應(yīng)用於邊框，將圖像分成九個(gè)區(qū)域：四個(gè)角、四個(gè)邊和一個(gè)中間區(qū)域，可以選擇為偏移量指定一個(gè)到四個(gè)數(shù)字或百分比值。
• border-image-width 屬性設(shè)計(jì)邊框圖像區(qū)域內(nèi)的內(nèi)部偏移量，而 border-image-outset 屬性允許將邊框圖像區(qū)域推到邊框框之外。
• 可以使用簡(jiǎn)寫 border 屬性重置 border-image 屬性，該屬性可以快速重置元素所有四個(gè)邊框的寬度、顏色和樣式。在撰寫本文時(shí)，border-image 在所有主要瀏覽器中幾乎都得到了完全支持。

邊框圖像屬性

一種常見的邊框樣式設(shè)置方法是使用預(yù)設(shè)的 border-style 規(guī)則。這些規(guī)則包括：dotted、dashed、solid、double、groove、ridge、inset 和 outset。

這些樣式已經(jīng)提供了相當(dāng)多的選擇。但是，您可以更進(jìn)一步，使用以下 CSS 屬性為邊框添加吸引人的背景圖像。

border-image-source 屬性

使用此屬性，您可以為元素的邊框分配背景圖像。該值通常是圖像的 URL：

element {
  border-image-source: url('myimage.png');
}

您會(huì)發(fā)現(xiàn) CSS 漸變效果也一樣好：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

在瀏覽器中，它看起來像這樣：

如果您將此屬性設(shè)置為 none 值，或者無法顯示圖像，瀏覽器將使用為 border-style 屬性設(shè)置的值。因此，最好使用 border-style 作為後備方案。

您使用的圖像不需要與邊框的寬度和高度匹配。 CSS 邊框圖像的美妙之處在於，您只需要一個(gè)小圖像即可裝飾任何寬度和高度的元素邊框，包括自適應(yīng)不同屏幕尺寸的元素。

border-image-slice 屬性

使用 border-image-source 屬性選擇圖像後，您可以使用 border-image-slice 屬性將其應(yīng)用於邊框。

element {
  border-image-source: url('myimage.png');
}

讓我們更詳細(xì)地了解一下。此屬性設(shè)計(jì)來自頂部、右側(cè)、底部和左側(cè)的內(nèi)部偏移量。這些偏移量最終會(huì)將您的小型圖像切成九個(gè)區(qū)域：四個(gè)角、四個(gè)邊和一個(gè)中間區(qū)域。

您可以指定一個(gè)到四個(gè)數(shù)字或百分比值。當(dāng)您指定四個(gè)值時(shí)，它們將應(yīng)用於頂部、右側(cè)、底部和左側(cè)偏移量。如果您跳過左側(cè)偏移量，則這將與右側(cè)相同。如果您錯(cuò)過了底部偏移量，則這將與頂部相同。省略右側(cè)偏移量的值將使其與頂部相同。如果您只使用一個(gè)值，它將用於所有四個(gè)偏移量。

百分比值指的是圖像大小的百分比——水平偏移量的圖像寬度和垂直偏移量的圖像高度。

數(shù)字代表圖像中的像素，或者在矢量圖像的情況下代表坐標(biāo)。還有一點(diǎn)，不要在數(shù)字後面添加 px，這樣做不起作用！

以下是您可以使用 border-image-slice 的方法：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

element {
  border-image-slice: 19;
}

使用大小為 100 x 100 像素的圖像作為邊框，其外觀如下：

最終效果如下：

中間區(qū)域呈現(xiàn)為完全透明，因此不可見。如果您想使其可見，請(qǐng)?zhí)砑?fill 關(guān)鍵字。

例如，使用中間區(qū)域完全不透明的圖像，不添加 fill 關(guān)鍵字，將與上面的示例完全相同。但是，請(qǐng)按如下方式應(yīng)用 fill 關(guān)鍵字：

<div class="box">
  Border Image
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
</div>

使用中間區(qū)域包含細(xì)節(jié)的圖像：

然後，我們會(huì)發(fā)現(xiàn)圖像的中間區(qū)域在頁(yè)面上完全可見，儘管有點(diǎn)模糊和壓縮：

border-image-width 屬性

此屬性繪製在所謂的邊框圖像區(qū)域內(nèi)。默認(rèn)情況下，此區(qū)域的邊界是邊框框的邊界。與 border-image-slice 屬性一樣，border-image-width 設(shè)計(jì)內(nèi)部偏移量，將圖像分成九個(gè)區(qū)域。

此屬性接受一個(gè)到四個(gè)值（頂部、右側(cè)、底部、左側(cè)），可以使用數(shù)字或百分比。百分比相對(duì)於邊框圖像區(qū)域的大小，即水平偏移量的區(qū)域?qū)挾群痛怪逼屏康膮^(qū)域高度。如果您使用沒有 px 單位的數(shù)字，則這些數(shù)字將等於相應(yīng)的計(jì)算邊框?qū)挾鹊谋稊?shù)。例如，下面的代碼：

element {
  border-image-source: url('myimage.png');
}

……將邊框圖像的寬度設(shè)置為邊框?qū)挾戎档?3 倍，即 19 像素。結(jié)果如下所示：

我發(fā)現(xiàn)，為 border-image-width 和 border-image-slice 屬性賦予相同的值可以確保您的邊框圖像以最佳狀態(tài)顯示，而不會(huì)出現(xiàn)不需要的變形。

border-image-outset 屬性

到目前為止，我使用的所有屬性都默認(rèn)為內(nèi)嵌邊框圖像區(qū)域。但是，您可以選擇將邊框圖像區(qū)域推到邊框框之外。您可以使用 border-image-outset 屬性來實(shí)現(xiàn)。

此屬性採(cǎi)用一個(gè)到四個(gè)值（頂部、右側(cè)、底部、左側(cè)），以數(shù)字或長(zhǎng)度單位（如 px、em 等）表示。如果您使用數(shù)字，則結(jié)果將是邊框圖像被推到邊框框之外，其倍數(shù)為計(jì)算的邊框?qū)挾取?

為了進(jìn)一步說明，我繪製了一個(gè)綠色的虛線輪廓來表示邊框框。邊框圖像區(qū)域包含一個(gè)粉紅色的邊框圖像。在其默認(rèn)的內(nèi)嵌狀態(tài)下，邊框圖像位於綠色輪廓內(nèi)。這意味著邊框圖像區(qū)域位於邊框框內(nèi)。

將 border-image-outset: 19px; 添加到 CSS 規(guī)則集中，會(huì)將粉紅色的邊框圖像推到虛線綠色輪廓之外。這表示邊框圖像區(qū)域繪製在邊框框之外：

請(qǐng)注意，位於邊框框之外的邊框圖像部分不會(huì)觸發(fā)滾動(dòng)，也不會(huì)捕獲鼠標(biāo)事件。

border-image-repeat 屬性

此屬性提供了一些關(guān)於如何在邊框的側(cè)面和中間部分縮放和平鋪圖像切片的選擇。第一個(gè)值應(yīng)用於水平側(cè)（頂部和底部），第二個(gè)值應(yīng)用於垂直側(cè)（右側(cè)和左側(cè)）。如果您只設(shè)置一個(gè)值，則該值將應(yīng)用於水平和垂直兩側(cè)。

可用值包括：

• stretch – 如果您不使用 border-image-repeat 屬性，則為默認(rèn)值。此關(guān)鍵字會(huì)拉伸圖像以填充可用區(qū)域。
• repeat – 圖像平鋪重複以填充可用區(qū)域。如果可用區(qū)域不能被平鋪寬度整除，則圖像可能會(huì)被切斷。
• round – 與 repeat 相同，但是如果空間不足以容納平鋪，則會(huì)縮放平鋪直到它們都適合。這確保了平鋪永遠(yuǎn)不會(huì)被切斷，但圖像可能會(huì)看起來有點(diǎn)壓縮。
• space – 與 repeat 相同，但是如果空間不是平鋪寬度的精確倍數(shù)，則額外的空白將均勻分佈在每個(gè)平鋪周圍。

在撰寫本文時(shí)，F(xiàn)irefox 似乎將 space 呈現(xiàn)為與 stretch 相同，而 Chrome 則將 space 呈現(xiàn)為與 repeat 相同。

border-image 簡(jiǎn)寫屬性

您可以將上面討論的所有單個(gè)屬性壓縮到 border-image 簡(jiǎn)寫屬性中，如下所示：

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-outset
5. border-image-repeat

以下是代碼片段：

element {
  border-image-source: url('myimage.png');
}

如果要?jiǎng)h除邊框圖像怎麼辦？

重置邊框的最佳方法是使用簡(jiǎn)寫 border 屬性。使用 border，您可以快速重置元素所有四個(gè)邊框的相同寬度、顏色和樣式。無需指定 border-image: none 規(guī)則，也不需要覆蓋任何單個(gè) border-image 屬性。

瀏覽器支持

在撰寫本文時(shí)，border-image 在所有主要瀏覽器中幾乎都得到了完全支持。只有 Firefox 無法跨元素拉伸 SVG 圖像，Opera Mini 支持帶有 -o- 前綴的簡(jiǎn)寫語法，但不支持單個(gè)屬性。

結(jié)論

本文主要介紹了 border-image 屬性：它接受的值、最佳使用方法以及在撰寫本文時(shí)的瀏覽器支持級(jí)別。

您可以在 CSS 背景和邊框級(jí)別 3 規(guī)範(fàn)文檔中找到更多詳細(xì)信息。

如果您在項(xiàng)目中使用了 border-image 屬性，為什麼不與社區(qū)分享最終結(jié)果呢？

期待您的回復(fù)！

關(guān)於使用 CSS 邊框圖像裝飾網(wǎng)頁(yè)的常見問題解答 (FAQ)

如何創(chuàng)建 CSS 邊框圖像？

創(chuàng)建 CSS 邊框圖像涉及使用 border-image 屬性。此屬性允許您指定用作元素周圍邊框的圖像。此屬性的語法如下：

element {
  border-image-source: url('myimage.png');
}

source 是您要使用的圖像的 URL。 slice 定義圖像的內(nèi)側(cè)偏移量。 width 設(shè)置邊框的寬度。 outset 確定邊框圖像區(qū)域超出邊框框的距離。 repeat 指定圖像的平鋪或重複方式。

CSS 中有哪些不同的邊框樣式？

CSS 提供了幾種邊框樣式，您可以使用它們來自定義網(wǎng)頁(yè)元素的外觀。這些包括：none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。每種樣式都會(huì)產(chǎn)生不同的視覺效果。例如，dotted 會(huì)創(chuàng)建一個(gè)帶有系列點(diǎn)的邊框，而 double 會(huì)創(chuàng)建一個(gè)雙線邊框。

如何使用 CSS 創(chuàng)建內(nèi)嵌邊框？

可以使用 inset 邊框樣式在 CSS 中創(chuàng)建內(nèi)嵌邊框。此樣式使框看起來像是嵌入在頁(yè)面中的。其語法如下：

element {
  border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
}

我可以為元素的不同側(cè)使用不同的邊框樣式嗎？

可以，CSS 允許您將不同的邊框樣式應(yīng)用於元素的不同側(cè)。您可以使用 border-top-style、border-right-style、border-bottom-style 和 border-left-style 屬性分別指定每側(cè)的樣式。

如何控制 CSS 邊框圖像的大小？

可以使用 border-image-width 屬性控制 CSS 邊框圖像的大小。此屬性通過定義邊框區(qū)域的大小來設(shè)置邊框圖像的寬度。您可以以像素為單位指定寬度，也可以將其指定為元素框的百分比。

我可以將漸變圖像用作 CSS 中的邊框嗎？

可以，CSS 允許您將漸變圖像用作邊框。您可以使用 linear-gradient 函數(shù)創(chuàng)建漸變圖像，然後使用 border-image 屬性將其用作邊框圖像。

如何使我的 CSS 邊框圖像重複？

CSS 中的 border-image-repeat 屬性控制邊框圖像的重複方式。可能的值為 stretch（默認(rèn)值）、repeat、round 和 space。 stretch 將圖像縮放以填充區(qū)域。 repeat 平鋪圖像。 round 平鋪圖像，但將其縮放以精確匹配。 space 平鋪圖像，但在平鋪之間留有空間。

CSS 中的 border 屬性和 border-image 屬性有什麼區(qū)別？

CSS 中的 border 屬性用於設(shè)置元素邊框的樣式、寬度和顏色。另一方面，border-image 屬性允許您使用圖像作為元素周圍的邊框。

我可以將 CSS 邊框圖像與圓角一起使用嗎？

可以，您可以將 CSS 邊框圖像與圓角一起使用。您可以使用 border-radius 屬性創(chuàng)建圓角，然後使用 border-image 屬性應(yīng)用邊框圖像。

如何在 CSS 中創(chuàng)建虛線邊框？

可以使用 dashed 邊框樣式在 CSS 中創(chuàng)建虛線邊框。其語法如下：

element {
  border-image-source: url('myimage.png');
}

這將創(chuàng)建一個(gè)帶有系列短線或虛線的邊框。

以上是用CSS邊框圖像裝飾網(wǎng)絡(luò)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！