border-image

本文轉載自查看原文 2019-09-26 12:37 338 HTML和CSS

border-image是一種簡寫屬性，可讓您使用圖像或CSS漸變作為元素的邊框。

.module {
  border-image: url(border.png) 25 25 round;
}

當border-collapse設置為collapse時，border-image屬性可以應用於任何元素，但內部表格元素(例如tr，th，td)除外。

屬性

border-image唯一必需屬性的簡寫是border-image-source。如果未指定，則其他屬性默認為其初始值。這些是按順序排列的邊框圖像屬性：

border-image-source

.module {
  border-image-source: url(border.png);
}

此屬性指定邊框圖像的來源。這可以是URL，數據URI，CSS漸變或嵌入式SVG(盡管對嵌入式SVG的支持受到限制，請參閱SVG使用說明)。

初始值為none。

border-image-slice

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
}

此屬性的值告訴瀏覽器在哪里“切片”圖像以創建邊框。圖像分為9個部分-四個角，四個邊和中心。

帶有以紅色標記的切片線的邊框圖像(放大以顯示細節)。

該屬性最多接受四個正的無單位數字或百分比，以及一個可選的fill關鍵字。初始值為100%。

無單位數字通過光柵圖像上的像素和SVG上的坐標來測量切片。百分比值是相對於圖像尺寸的。例如，在100px x 100px的光柵圖像上，距圖像任何一側的10%為10px。有關百分比如何在SVG圖像上工作的更多信息，請參見SVG上的使用說明。

這些值從圖像的頂部，右側，底部和左側邊緣開始測量(按此順序)。如果缺少一個值，則其值將默認為其另一側的值-例如，如果缺少左側的值，但右側的值設置為10px，左側的值也將變為10px。

默認情況下，源圖像的中心被丟棄。但是，當使用fill關鍵字時，它將改為應用於邊框元素的背景。（注：仍然可以使用background-image屬性，該屬性產生的背景圖片位於由fill關鍵字產生的“背景圖片”的下方，會被"fill背景圖片"覆蓋掉（如果border-image-source引用的圖片沒有透明部分的話）。）

border-image-width

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
}

此屬性設置邊框圖像的寬度。它接受百分比值，無單位正數或關鍵字auto。

這些值用於元素的頂部，右側，底部和左側(按此順序)。如果缺少一個值，則將其繪制為對立邊的值。

對於此屬性，百分比值是相對於邊框圖像區域的大小而言的，而無單位數則乘以邊框寬度(border-width)。

初始值為1，因此，如果未設置此值，但是元素具有邊框或邊框寬度聲明，則將以該寬度繪制邊框圖像。

auto關鍵字告訴瀏覽器使用border-image-slice的大小(如果可用)或border-width的大小。

border-image-outset

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
}

此屬性的值指定邊框圖像區域超出邊框超出的距離。初始值為0。該屬性最多接受四個正長度值或無單位數。長度值是絕對測量值，而無單位數與邊框寬度相乘以計算初始值，類似於無單位數對邊框圖像寬度的工作方式。

border-image-repeat

.module {
  border-image-source: url(border.png);
  border-image-slice: 20;
  border-image-width: 20;
  border-image-outset: 1;
  border-image-repeat: round;
}

此屬性控制如何重復圖像以填充邊框區域。

您最多可以為此屬性指定兩個值。如果指定了一個值，則將其同時應用於邊框的水平和垂直邊。如果指定了兩個，則第一個應用於水平側，第二個應用於垂直側。

值

stretch：初始值。根據需要拉伸邊框圖像以填充該區域。

repeat：圖像平鋪以填充該區域，並在必要時划分平鋪。

round：圖像平鋪以填充該區域，並在必要時進行重新縮放以避免划分平鋪。當不能整數次平鋪時，根據情況放大或縮小圖像。

space：圖像平鋪以填充該區域。如果無法用整個圖片方塊填充該區域，則在圖片方塊周圍插入空間以保持均勻。注意：此值尚未由任何瀏覽器實現。當不能整數次平鋪時，會用空白間隙填充在圖像周圍(不會放大或縮小圖像)。

嘗試在此演示中使用不同的border-image-repeat值(包含空格僅出於將來的兼容性;目前尚無法在任何瀏覽器中指定該空格)：

邊框圖像使用漸變

所有支持邊框圖像的瀏覽器也都支持CSS漸變。您可以使用任何類型的漸變來制作邊框。此演示演示了重復的線性漸變，形成了條紋邊框(將其懸停以查看條紋顏色交換)。

瀏覽器將對漸變進行切片，就像對寬度和高度等於border-image-width的正方形圖像進行切片一樣。

邊框圖像使用SVG

將光柵圖像和SVG用於border-image之間的最大區別在於切片的測量方式。

無單位值表示SVG圖像上的坐標。

百分比值是相對於圖像大小的。

如果SVG沒有定義的尺寸，則使用默認的尺寸調整算法對其進行尺寸調整，該算法將使用border-image-outset設置的邊框圖像區域作為默認尺寸。在實踐中這可能會造成混淆，因此在可能的情況下為SVG設置大小會有所幫助。

圖片來源URL中的SVG

您可以將SVG文件鏈接作為border-image-source，就像鏈接光柵圖像一樣：

.module {
  border-image-source: url(border.svg);
}

這可能是將SVG用作邊框圖像的最佳方法。它得到了很好的支持-所有支持border-image的現代瀏覽器都接受鏈接SVG作為border-image-source的值。

內聯

您可以對SVG邊框圖像進行Base64編碼，也可以將SVG標記直接寫入邊框圖像源，但是這兩種方法都存在相當大的問題。

Base64 SVG有很多問題值得推薦：也許不要Base64 SVG。

將SVG圖像標記直接寫入border-image聲明中也很復雜; Internet Explorer無法識別它，並且在Firefox中的支持很奇怪(請參閱Bug 619500)。

本演示中的邊框圖像是嵌入式SVG漸變。如果您查看“ CSS”選項卡，您會注意到標記必須精心組合-請注意標記周圍的雙引號，標記內的單引號以及十六進制顏色的轉義“井”(#)字符。

制作單個重復圖像的邊框

用一個單一的重復圖像為元素加上邊框似乎很容易，因為它具有稱為border-image的屬性，但是實際執行此操作的過程有些違反直覺。

舉例來說，假設您想將元素環繞重復的心形圖標。你無法做到只有一顆心的圖像。相反，您必須制作一個心形“框架”的圖像，並按照您希望它們出現在邊框中的順序排列，然后對該圖像進行切片。

“框架”圖像中的八個心形，放大以顯示細節。紅線表示切片。

如果您認為這聽起來很荒謬，那么您此道不孤。幾年前，埃里克·邁爾(Eric Myer)的博客上對該主題進行了長篇的論述，許多前端開發專家對此進行了討論。

在此演示中，心臟圍繞div的邊界重復。border-image-source是八個相同心臟圖標的合成圖像，將它們切成切片，以便在元素的每一側使用完整的心臟形狀。