CSS 中的邊框影像：Interop 2023 的一個關鍵重點領域

Interop 2023 是一項跨瀏覽器合作專案，旨在提高 Web 的互操作性——達到每個技術在所有瀏覽器中都能完全相同的狀態。 (來源: Interop 2023)

在 Interop 2023 中，CSS 邊框影像被確定為一個關鍵的關注領域。此功能允許您使用影像來樣式化元素的邊框，並且已在瀏覽器中支援多年。然而，瀏覽器之間的行為差異（正如 Web 平臺問題中所強調的）導致 Web 開發人員在充分使用此功能時有所顧慮。隨著邊框影像被納入 Interop 2023，人們重新致力於解決行為差異並鼓勵廣泛採用。這項舉措強調了建立在不同瀏覽器中一致的、視覺上吸引人的網頁設計的必要性。

邊框影像的每個方面都可以使用特定的 border-image CSS 屬性進行控制，所有這些屬性都在 MDN 的參考頁面上得到了廣泛解釋。在這篇文章中，我們將回顧所有與邊框影像相關的長屬性，並探討如何自定義邊框中的影像。

開始使用邊框影像

CSS 中的邊框影像允許您使用自定義影像作為網站元素邊框，從而取代標準邊框。這有多酷！它為您提供了一種獨特而強大的方式來樣式化併為您的網站添加個人創意。例如，假設您正在經營一家線上花店。您可以將花卉或自然影像用作您網站上各種元素的邊框，從而為整個網站增添迷人的統一主題。

以下是成功將影像用作元素邊框所涉及的所有步驟的摘要。第一步是指定您喜歡的影像的來源。接下來，您切片影像以指定將在邊框中使用的部分。然後，您調整影像的寬度（即厚度），這將控制影像在邊框區域內的縮放方式。如果您希望影像超出元素的邊框，可以選擇定義一個外延。最後，您決定影像如何適應或重複。這將定義影像是重複、拉伸還是調整以適應邊框區域。透過遵循這些步驟，您可以有效地在網頁設計中使用自定義影像作為元素邊框。

我們將使用以下自然主題影像（來自 pixabay）來演示如何將其用作邊框影像。

另外，供參考，下面的框代表我們要新增邊框影像的元素。粗綠色的邊框區域將由我們的影像替換。淺黃色背景色代表內容和內邊距框。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
  border: 30px solid green;
}

指定影像

您可以使用 border-image-source 屬性指定邊框影像的來源。與 background-image 類似，此屬性接受影像檔案的 URL 或漸變，並將其應用於框的邊框。您可以使用各種影像格式，如 PNG、JPG 或 SVG。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png");
}

您會在此階段注意到，影像僅出現在框的角部。不是我們期望的，對吧？這只是第一步，離自定義邊框中影像的外觀還有幾步之遙。影像需要使用其他 border-image 屬性值進一步處理才能呈現最終的邊框外觀 — 在這一點上，我們缺少關於如何切片或在邊框上分佈圖像的說明。

您會在上面的程式碼中注意到，除了邊框影像之外，border-width 和 border-style 都已使用 border 簡寫屬性定義。這是因為只有當元素具有定義的邊框時，border-image 屬性才會可見。border-width 屬性設定邊框影像的可用空間，而 border-style 屬性確保邊框影像正確顯示。沒有 border-width 和 border-style，無論您設定什麼 border-image 屬性，邊框影像都不會顯示。

切片影像

切片有助於我們定義將在元素邊框的角部和側邊顯示的影像部分。這就像把蛋糕切成片，每塊都有自己的位置。

您可以使用 border-image-slice 屬性來切片影像。此屬性使用四條虛線來切片影像，這些虛線距離相應邊緣的切片距離指定。這四條切片線有效地將影像分為九個區域：四個角、四個邊緣和中間。這些線決定了將用於邊框的影像區域的大小。

例如，所有側面的切片值為 30，切片區域將如下圖右側影像所示。

使用此值 30，上面顯示的切片區域未能從影像中捕獲足夠的區域，至少沒有捕獲我們真正希望在邊框中顯示的區域。大多數葉子和花朵都被截斷了。在下面的程式碼中，讓我們使用一個更高的值，例如 70，來切片影像看看效果。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
}

這看起來好多了，影像的更理想區域顯示在邊框中。正如您所能看到的，此步驟的結果將取決於您使用的影像。所以一定要探索不同的切片設定。請注意，是我們將上面顯示的綠色邊框區域替換為我們的自定義影像。

您可以在 border-image-slice 值中指定另一個選項。預設情況下，切片操作會丟棄影像的中間部分。但是，如果您想保留它，可以在值中新增 fill，例如 border-image-slice: 70 fill;。這將把邊框影像繪製在中間區域的背景之上。

調整寬度

在下一步中，讓我們決定邊框影像的厚度。這將決定邊框影像在邊框區域內的縮放方式。我們使用 border-image-width 屬性來設定邊框影像的寬度。它定義了邊框影像從邊框邊緣向內的偏移量。

您可以透過下面的影像看到將寬度設定為 10px 的效果。在此寬度下，邊框中的影像被拉伸得很厲害。

讓我們嘗試將影像的寬度增加到 30px。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px;
}

在此寬度下，邊框影像的縮放效果更好。

您可能會認為我們在切片部分的結尾也得到了這個輸出。那麼新增 border-image-width 有什麼幫助呢？輸出看起來是一樣的，因為當 border-image-width 屬性未指定時（切片部分就是這種情況），瀏覽器使用初始值 1。這意味著邊框影像的寬度將等於相應 border-image-slice 的內在寬度或高度（以適用者為準）。如果影像沒有所需的內在尺寸，則使用相應的 border-width。

讓我們也花點時間確保我們理解 border-image-width 和 border-width 屬性的目的。border-image-width 屬性定義了邊框影像的寬度或厚度，而 border-width 屬性定義了元素周圍邊框的寬度。因此，border-image-width 決定了邊框影像在此分配的邊框區域內的縮放方式。考慮以下情況：

• 如果 border-image-width 大於 border-width，則邊框影像將超出內邊距，甚至可能超出內容框邊緣。
• 如果 border-image-width 小於 border-width，則影像可能無法填充整個邊框區域。但是，影像可能會出現失真或縮小，因為它被擠壓到較小的空間中。

使影像超出邊框

有時，您可能希望您的邊框影像超出元素的邊框框，幾乎像為設計增加更多深度一樣。這就像決定蛋糕上的糖霜應該溢位多少。這時 border-image-outset 屬性就派上用場了。儘管屬性的指定順序不嚴格，但 border-image-outset 通常在 border-image-width 屬性之後指定。

這是外延值 10px（左側）和 20px（右側）的並排比較。這些影像中的邊框已突出顯示（使用瀏覽器檢查器工具中的盒子模型部分）以演示邊框影像在邊框區域外的擴充套件。

繼續我們的示例，我們將為 border-image-outset 使用 10px 的值。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border-width: 30px; /* Width of the border area */
  border-style: solid;
  border-image-source: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px; /* Width of the border image */
  border-image-outset: 10px; /* Extension of the border image beyond the border area */
}

根據上面的程式碼，邊框影像將顯示為 30px 的寬度，該寬度在元素由 border-width 定義的邊框區域內。border-image-outset 值指定邊框影像將超出邊框框 10px。此擴充套件是 border-image-width 指定的寬度的附加部分。邊框及其外延所佔的總寬度將為 40px（邊框為 30px，外延額外 10px）。

較大的外延值可以使邊框看起來像是漂浮在元素周圍，而較小的外延則使邊框影像更受限制。

控制佈局

我們現在非常接近於在邊框中獲得最終的影像外觀。由於我們使用的特定影像以及為切片和寬度指定的值，該元素的邊框已經類似於最終期望的外觀。但是，您還有一個用於最終佈局調整的旋鈕。在最後一步中，您定義了影像的切片部分如何在邊框周圍佈局 — 即，它們是應該重複、拉伸還是調整以適應邊框區域。border-image-repeat 屬性對此有所幫助。此屬性通常在 border-image 屬性中最後指定，因為它處理邊框影像在元素中的最終佈局。

• 為了使影像圍繞邊框重複，使其完美貼合而不被裁剪，請使用 round 值。影像部分可能會被拉伸以實現完美貼合。
• 為了在完美貼合的情況下新增額外的空間而不是拉伸，請使用 space 值。
• 為了拉伸影像以填充邊框區域而不重複影像，請使用 stretch 值。
• repeat 值將影像在邊框上重複，如果它不能完美貼合邊框區域，可能會被裁剪。

您甚至可以透過為 border-image-repeat 指定兩個值來為水平（頂部和底部）和垂直（左側和右側）側定義不同的佈局和縮放。作為練習，嘗試探索使用所有側面相同值與水平和垂直側面不同值之間的外觀差異。

在這裡，我們將 round 用於我們的示例，以使影像完美貼合邊框。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border: 30px solid transparent;
  border-image-source: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px;
  border-image-outset: 10px;
  border-image-repeat: round;
}

好了，瞧！一張我們喜歡的精美圖片，或者一張與我們網站主題相符的圖片，用作我們可以在網站設計中使用的元素的邊框。

使用 border-image 簡寫屬性

我們可以使用簡寫的 border-image 屬性一次性設定所有這些屬性。

下面的程式碼使用簡寫的 border-image 屬性同時設定多個邊框影像屬性，包括 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat。任何未指定的您沒有指定的值都將設定為該屬性的初始值。

<div class="box">Your content here</div>

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 10px;
  font-size: 1.2em;
  background: #fff3d4;
}

.box {
  border: 30px solid transparent;
  border-image: url("https://mdn.club.tw/en-US/blog/border-images-interop-2023/nature.png")
    70 / 30px / 10px round;
}

Interop 2023 及以後

作為 Interop 2023 關注 CSS 邊框影像的一部分，人們正在大力提高跨瀏覽器相容性和標準化行為。隨著瀏覽器開發人員致力於實現一致的邊框影像行為，我們希望本文能激發或重燃您對未來網頁專案探索邊框影像的興趣。

現在是探索此功能創意潛力的絕佳時機！我們期待聽到您的想法和建議，並樂於看到您的創作。歡迎透過 Mastodon 或 Discord 與我們分享。

其他資源

要互動式地探索各個 border-image 屬性並檢查它們之間的相互作用，請檢視 MDN 上的 邊框影像生成器工具。您可以上傳任何影像並檢視各種 border-image 屬性的效果。