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

轉載于:https://www.cnblogs.com/panshijie205/p/6851759.html

總結

以上是生活随笔為你收集整理的CSS border-image属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。