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

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

要點

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

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

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

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

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

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

border-image-slice 屬性

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

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

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

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

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

數(shù)字代表圖像中的像素，或者在矢量圖像的情況下代表坐標(biāo)。還有一點，不要在數(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)為完全透明，因此不可見。如果您想使其可見，請?zhí)砑?fill 關(guān)鍵字。

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

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

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

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

border-image-width 屬性

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

此屬性接受一個到四個值（頂部、右側(cè)、底部、左側(cè)），可以使用數(shù)字或百分比。百分比相對於邊框圖像區(qū)域的大小，即水平偏移量的區(qū)域?qū)挾群痛怪逼屏康膮^(qū)域高度。如果您使用沒有 px 單位的數(shù)字，則這些數(shù)字將等於相應(yīng)的計算邊框?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)顯示，而不會出現(xiàn)不需要的變形。

border-image-outset 屬性

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

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

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

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

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

border-image-repeat 屬性

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

可用值包括：

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

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

border-image 簡寫屬性

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

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');
}

如果要刪除邊框圖像怎麼辦？

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

瀏覽器支持

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

結(jié)論

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

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

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

期待您的回復(fù)！

關(guān)於使用 CSS 邊框圖像裝飾網(wǎng)頁的常見問題解答 (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)頁元素的外觀。這些包括：none、hidden、dotted、dashed、solid、double、groove、ridge、inset 和 outset。每種樣式都會產(chǎn)生不同的視覺效果。例如，dotted 會創(chuàng)建一個帶有系列點的邊框，而 double 會創(chuàng)建一個雙線邊框。

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

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

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)建一個帶有系列短線或虛線的邊框。

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