標籤：uri 使用 base64 首碼 line dex 問題 沒有 添加
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
CSS border-image屬性
