用CSS邊框圖像裝飾網絡

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

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

要點

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

邊框圖像屬性

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

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

border-image-source 屬性

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

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

您會發現 CSS 漸變效果也一樣好：

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

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

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

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

border-image-slice 屬性

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

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

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

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

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

數字代表圖像中的像素，或者在矢量圖像的情況下代表坐標。還有一點，不要在數字後面添加 px，這樣做不起作用！

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

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

element {
  border-image-slice: 19;
}

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

最終效果如下：

中間區域呈現為完全透明，因此不可見。如果您想使其可見，請添加 fill 關鍵字。

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

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

使用中間區域包含細節的圖像：

然後，我們會發現圖像的中間區域在頁面上完全可見，儘管有點模糊和壓縮：

border-image-width 屬性

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

此屬性接受一個到四個值（頂部、右側、底部、左側），可以使用數字或百分比。百分比相對於邊框圖像區域的大小，即水平偏移量的區域寬度和垂直偏移量的區域高度。如果您使用沒有 px 單位的數字，則這些數字將等於相應的計算邊框寬度的倍數。例如，下面的代碼：

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

……將邊框圖像的寬度設置為邊框寬度值的 3 倍，即 19 像素。結果如下所示：

我發現，為 border-image-width 和 border-image-slice 屬性賦予相同的值可以確保您的邊框圖像以最佳狀態顯示，而不會出現不需要的變形。

border-image-outset 屬性

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

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

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

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

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

border-image-repeat 屬性

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

可用值包括：

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

在撰寫本文時，Firefox 似乎將 space 呈現為與 stretch 相同，而 Chrome 則將 space 呈現為與 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 規則，也不需要覆蓋任何單個 border-image 屬性。

瀏覽器支持

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

結論

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

您可以在 CSS 背景和邊框級別 3 規範文檔中找到更多詳細信息。

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

期待您的回复！

關於使用 CSS 邊框圖像裝飾網頁的常見問題解答 (FAQ)

如何創建 CSS 邊框圖像？

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

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

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

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

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

如何使用 CSS 創建內嵌邊框？

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

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

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

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

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

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

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

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

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

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

CSS 中的 border 屬性和 border-image 屬性有什麼區別？

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

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

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

如何在 CSS 中創建虛線邊框？

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

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

這將創建一個帶有系列短線或虛線的邊框。

以上是用CSS邊框圖像裝飾網絡的詳細內容。更多資訊請關注PHP中文網其他相關文章！