border-image

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是八個相同心臟圖標的合成圖像，將它們切成切片，以便在元素的每一側使用完整的心臟形狀。

更多使用說明

儘管對border-image的支持已獲得改進(當前全部瀏覽器版本均未提供前綴支持)，但仍然須要設置回退border樣式。回退border將顯示在不支持border-image的瀏覽器中，或者若是該圖像沒法加載。

與其餘某些邊框屬性不一樣，border-image沒法設置動畫。 也不能使用border-radius設置樣式。

若是聲明一個border-image-source和一個沒有任何切片的border寬度或border-image-width，則整個未切片的圖像將放置在元素的四個角，並縮放到指定的寬度。