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

發表於2024-02-27
CSS
本文翻譯自 Border images in CSS: A key focus area for Interop 2023，作者：Dipika Bhattacharya， 略有刪改。

Interop 2023是一項提高Web的互操作性為目標，以達到每種技術在各瀏覽器中完全相同的狀態。（來源：Interop 2023）

在Interop 2023中，CSS影像邊框被確定為一個關鍵的重點領域。這個特性允許您使用影像來設定元素邊框的樣式，瀏覽器已經支援這個特性很多年了。然而瀏覽器之間的行為差異導致Web開發人員不願意完全使用此功能。隨著Interop 2023中包含影像邊框，重新承諾解決行為差異並鼓勵廣泛採用。這一舉措強調了能夠建立在不同瀏覽器之間保持一致的視覺吸引力的網頁設計的重要性。

影像邊框的每個方面都可以使用特定的border-imageCSS屬性進行控制，這些都在MDN的參考頁面上進行了詳細的解釋。在這篇文章中，我們將提供與邊框影像相關的所有屬性的概述，並探索如何在邊框中自定義影像。

開始使用邊框影像

CSS中的邊框影像允許您使用自定義影像作為網站上元素的邊框，取代標準邊框。這為您提供了一種獨特而強大的方式來設計和新增您的個人創意風格到您的網站。例如，想象一下你正在經營一家線上花店。您可以使用花卉或自然影像作為網站上各種元素的邊界，以增加整個網站的主題風格。

本文總結了使用影像作為元素邊框的所有步驟。第一步是指定您喜歡的影像的來源。然後將影像切片以指定要在邊框中使用的部分。接下來調整影像的寬度，這將控制影像在邊框區域內的縮放方式。如果您希望影像延伸到元素的邊界之外，則可以選擇定義起點。最後決定影像如何在邊框周圍擬合或重複。這將定義影像是否重複、拉伸或調整以適應邊界區域。透過遵循這些步驟，您可以有效地使用自定義影像作為網頁設計中的元素邊框。

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

作為參考，下面的框表示我們要新增邊框影像的元素。厚的綠色邊界區域是我們將用影像替換的區域。淺黃色背景色表示內容框和填充框。

指定邊框影像

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

.box {
  border: 30px solid transparent;
  border-image-source: url("https://developer.mozilla.org/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，對影像進行切片，看看效果如何。

.box {
  border: 30px solid transparent;
  border-image-source: url("https://developer.mozilla.org/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。

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

在這個寬度下，邊框影像看起來更好。

讓我們在這裡花點時間來確保我們理解了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（右側）的並排比較。這些影像中的邊框已高亮顯示，以演示邊框影像在邊框區域外的擴充套件。

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

.box {
  border-width: 30px;
  border-style: solid;
  border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png");
  border-image-slice: 70;
  border-image-width: 30px;
  border-image-outset: 10px;
}

基於上面的程式碼，邊框影像將以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來完美地適應影像的邊界。

.box {
  border: 30px solid transparent;
  border-image-source: url("https://developer.mozilla.org/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。任何未指定的值都將被設定為屬性的初始值。

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

Interop 2023及以後

作為Interop 2023對CSS邊框影像的關注的一部分，正在做出重大努力來增強跨瀏覽器相容性並標準化行為。瀏覽器開發人員承諾實現一致的邊框影像行為，我們希望這篇文章能激發或更新您在未來Web專案中探索邊框影像的興趣。

看完本文如果覺得有用，記得點個贊支援，收藏起來說不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

相關文章