CSS border-image屬性

 

border-image屬性很容易記，它容許你將圖片或CSS漸變形狀做爲一個元素的邊框。

 

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

該屬性能被應用於任何元素，但當表格元素（如` tr,th,td `）的border-collapse屬性值爲collapse時border-image屬性無效。

屬性

對於border-image而言，border-image-souce是惟一必需的。若無特殊指定，其餘屬性即爲默認值。如下爲border-image包含的屬性：

 

border-image-source

 

 

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

 

該屬性指明瞭邊框圖片的地址。屬性值能夠是URL，數據URI，CSS漸變形狀，或者行內SVG（儘管支持度有限，詳情見SVG usage notes一節）

border-image-slice

 

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

該屬性值指定瀏覽器從某處裁剪源圖片以得到邊框的某部分。圖片被分爲9部分-包括4個邊角，4條邊，還有中心塊。

 

（ 紅色線圍起來的區域爲裁剪區域）

 

該屬性最多接受4個不帶單位的正數或者百分比，包括一個可選的fill關鍵字。屬性的初始值爲100%。

border-image爲柵格圖片時，不帶單位的數字指定了裁剪的像素值；爲SVG時，這些數字表示按座標裁剪。例如，一張大小爲100px 100px的柵格圖片，任意一邊的10%都是10px.下面的SVG usage notes一節涉及SVG狀況下百分好比何工做。

這串數值規定從源圖片的上部，右部，下部，左部開始測量裁剪。若是缺乏一個值，默認取對邊的值-如缺乏左部的值，同時右部的值爲10px，左部的值會取10px.

默認捨棄源圖片的中心塊。一旦使用了fill關鍵字，源圖片的中心塊將做爲該元素的背景。

border-image-width

 

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

 

該屬性指定了邊框圖片的寬度。屬性值能夠是百分比，不帶單位的正數，或者是關鍵字auto.

該屬性值規定了元素上部，右部，下部，左部的邊框圖片寬度。若缺乏一個值，則取對邊的值。

對該屬性而言，百分比數值與邊框圖片區域的大小有關，而無單位數值將與border-width相乘。

屬性的初始值爲1，因此若該屬性值未設置，但該元素設置了border或border-width屬性,邊框圖片會依照這兩個屬性值進行繪製。

auto關鍵字告訴瀏覽器，可自動選擇border-image-slice(若是可用的話)或border-width屬性的值。

border-image-outset

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

該屬性值指定了邊框圖像區域從邊框盒子向外延伸的距離。初始值爲0。該屬性接受最多4個爲正的長度值或無單位數字。長度值即爲向外延伸的肯定距離，無單位數字則要與邊框寬度相乘獲得向外延伸距離，這與**border-image-width**屬性值爲無單位數字的狀況相似。

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;} 

該屬性控制圖片填充邊框區域的重複方式。

能夠爲該屬性指定最多兩個值。若是值爲1個，在邊框的豎直方向和水平方向均應用該值。若是指定了兩個值，第一個值應用於邊框水平方向，第二個值應用於邊框豎直方向。

 

屬性值

• stretch: 初始值。邊框圖片被拉伸以填充區域。

• repeat: 圖片平鋪以填充區域，必要時每一個部分會用多個圖片塊填充。

• round: 圖片平鋪以填充區域，如有必要避免每一個部分用多個圖片塊填充，圖片會被從新縮放，而後進行填充。

• space: 圖片平鋪以填充區域。若是區域沒法用整片圖片填滿，在每部分之間會加入空隙以填滿區域。注意，該屬性值並不是全部瀏覽器都支持。

在 demo中嘗試border-image-repeat不一樣的屬性值（space屬性值僅做爲將來特性，並不是全部瀏覽器都支持）。

使用漸變形狀

全部支持border-image的瀏覽器均支持CSS 漸變。你可使用任意形式的漸變來製做邊框。 demo展現了一個重複線性漸變的條狀邊框（鼠標滑過還可改變顏色）。

瀏覽器會裁剪該漸變形狀，正如裁剪一個正方形圖片，使得寬度與高度和border-image-width相等。

使用SVG

使用柵格圖像與使用SVG做爲邊框圖片，最大的不一樣是裁剪時如何測量。

在SVG圖片中無單位數值表明座標。

百分比數值表示與圖片尺寸有關。

若SVG沒有定義尺寸，則會被默認尺寸算法測量，該算法會使用設置的border-image-outset屬性值做爲默認尺寸。在實際應用中這個問題可能會形成困擾，因此請儘量爲SVG設置尺寸。

邊框圖片的連接

你能夠像border-image-source連接柵格圖片同樣，將屬性值設爲SVG文件的連接。

 

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

 

這應該是將SVG做爲邊框圖片的最好方法。全部支持border-image的現代瀏覽器都會支持border-image-source的值爲SVG文件的連接。

inline

你可使用Base64對SVG邊框圖片進行編碼，或者將SVG標籤直接寫入border-image-source，但這兩種方式都存在不小的問題。

64位編碼的SVG存在不少問題，詳情見[Probably Don't Base64 SVG](https://css-tricks.com/probably-dont-base64-svg/)。

在border-image中直接寫入SVG標籤一樣存在問題：IE瀏覽器沒法識別，而Firefox的支持也很怪異（[見Bug 619500](https://css-tricks.com/probably-dont-base64-svg/)）。

demo中的邊框圖片是一個行內SVG漸變形狀。若是檢查CSS你會發現標籤被當心地建立-標籤外使用雙引號，標籤內使用單引號，而且在16進制顏色中不使用#.

利用單一重複圖片實現邊框

這樣的效果人們會認爲border-image屬性很容易實現，可實際上實現的過程多少有點反直覺。

例如，你想爲元素添加心型圖標的邊框。若是使用的圖片只有一個心型，效果是沒法實現的。你必須擁有一張圖片，其中心型圖標的排列效果和預期的邊框效果一致，這時才能剪裁圖片。

 

（ 包含8個相同圖標的源圖片）

若是你認爲這聽起來很荒謬，那你就擁有了不少支持者。幾年前的一篇博客- lengthy discussion of the subject onEric Myer's blog，其中討論了許多前端方面的發展。

demo中，一個心形圍繞div的邊框重複排列。而源圖片中包含了8個相同的心形圖標，源圖片被裁剪後元素的每條邊都由完整的心形裝飾。

更多應用

儘管對border-image的支持已經加強-全部現代瀏覽器均已實現了不帶前綴的支持，設置一個備用的border樣式還是值得的。若是瀏覽器不支持border-image，或邊框圖片加載失敗，設置的邊框樣式會被瀏覽器使用。

border-image屬性沒法像其餘屬性同樣實現動畫效果，border-radius一樣沒法實現。

若是你聲明瞭border-image-source和border的寬度或者border-image-width，同時沒有任何剪裁設置，整個未裁剪的圖片就會被放置在元素的四個邊角，並放大至你指定的寬度。

 

相關連接

• border：https://css-tricks.com/almanac/properties/b/border/

• border-collapse：https://css-tricks.com/almanac/properties/b/border-collapse/

• box-sizing：https://css-tricks.com/almanac/properties/b/box-sizing/

更多信息

• border-image in the CSS Background and Borders Module Level 3 CR：https://www.w3.org/TR/css3-background/#border-images

• border-image at MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

• border-image.com：http://www.border-image.com/

• Border Image Explained from Dudley Storey：http://demosthenes.info/blog/438/CSS3-Border-Image-Explained

demo連接

• Practical border-image: responsive picture frame：http://codepen.io/dudleystorey/pen/yyZpeX

• True dotted borders using SVG and border-image：http://codepen.io/luclemo/pen/xbMdEx

• gradient button：http://codepen.io/gssxgss/pen/raQMvg

• Film Strip：http://codepen.io/nickpettit/pen/CzJnr

瀏覽器支持度

 

注：本文爲譯文

 

原文連接： https://css-tricks.com/almanac/properties/b/border-image/#bi-notes-on-svg