border-image屬性很容易記，它允許你將圖片或CSS漸變形狀作為一個(gè)元素的邊框。 .module {border-image: url(border.png) 25 25 round;}
該屬性能被應(yīng)用于任何元素，但當(dāng)表格元素（如` tr,th,td `）的border-collapse屬性值為collapse時(shí)border-image屬性無(wú)效。
屬性
對(duì)于border-image而言，border-image-souce是唯一必需的。若無(wú)特殊指定，其他屬性即為默認(rèn)值。以下為border-image包含的屬性： border-image-source .module {border-image-source: url(border.png);} 該屬性指明了邊框圖片的地址。屬性值可以是URL，數(shù)據(jù)URI，CSS漸變形狀，或者行內(nèi)SVG（盡管支持度有限，詳情見(jiàn)SVG usage notes一節(jié)）
border-image-slice .module{border-image-source: url(border.png);border-image-slice: 20;}
該屬性值指定瀏覽器從某處裁剪源圖片以獲得邊框的某部分。圖片被分為9部分-包括4個(gè)邊角，4條邊，還有中心塊。 （紅色線圍起來(lái)的區(qū)域?yàn)椴眉魠^(qū)域） 該屬性最多接受4個(gè)不帶單位的正數(shù)或者百分比，包括一個(gè)可選的fill關(guān)鍵字。屬性的初始值為100%。
border-image為柵格圖片時(shí)，不帶單位的數(shù)字指定了裁剪的像素值；為SVG時(shí)，這些數(shù)字表示按坐標(biāo)裁剪。例如，一張大小為100px 100px的柵格圖片，任意一邊的10%都是10px.下面的SVG usage notes一節(jié)涉及SVG情況下百分比如何工作。
這串?dāng)?shù)值規(guī)定從源圖片的上部，右部，下部，左部開(kāi)始測(cè)量裁剪。如果缺少一個(gè)值，默認(rèn)取對(duì)邊的值-如缺少左部的值，同時(shí)右部的值為10px，左部的值會(huì)取10px.
默認(rèn)舍棄源圖片的中心塊。一旦使用了fill關(guān)鍵字，源圖片的中心塊將作為該元素的背景。
border-image-width .module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;} 該屬性指定了邊框圖片的寬度。屬性值可以是百分比，不帶單位的正數(shù)，或者是關(guān)鍵字auto.
該屬性值規(guī)定了元素上部，右部，下部，左部的邊框圖片寬度。若缺少一個(gè)值，則取對(duì)邊的值。
對(duì)該屬性而言，百分比數(shù)值與邊框圖片區(qū)域的大小有關(guān)，而無(wú)單位數(shù)值將與border-width相乘。
屬性的初始值為1，所以若該屬性值未設(shè)置，但該元素設(shè)置了border或border-width屬性,邊框圖片會(huì)依照這兩個(gè)屬性值進(jìn)行繪制。
auto關(guān)鍵字告訴瀏覽器，可自動(dòng)選擇border-image-slice(如果可用的話(huà))或border-width屬性的值。
border-image-outset .module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;}
該屬性值指定了邊框圖像區(qū)域從邊框盒子向外延伸的距離。初始值為0。該屬性接受最多4個(gè)為正的長(zhǎng)度值或無(wú)單位數(shù)字。長(zhǎng)度值即為向外延伸的確定距離，無(wú)單位數(shù)字則要與邊框?qū)挾认喑说玫较蛲庋由炀嚯x，這與**border-image-width**屬性值為無(wú)單位數(shù)字的情況類(lèi)似。
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;}
該屬性控制圖片填充邊框區(qū)域的重復(fù)方式。
可以為該屬性指定最多兩個(gè)值。如果值為1個(gè)，在邊框的豎直方向和水平方向均應(yīng)用該值。如果指定了兩個(gè)值，第一個(gè)值應(yīng)用于邊框水平方向，第二個(gè)值應(yīng)用于邊框豎直方向。 屬性值

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

• repeat: 圖片平鋪以填充區(qū)域，必要時(shí)每個(gè)部分會(huì)用多個(gè)圖片塊填充。

• round: 圖片平鋪以填充區(qū)域，若有必要避免每個(gè)部分用多個(gè)圖片塊填充，圖片會(huì)被重新縮放，然后進(jìn)行填充。

• space: 圖片平鋪以填充區(qū)域。如果區(qū)域無(wú)法用整片圖片填滿(mǎn)，在每部分之間會(huì)加入空隙以填滿(mǎn)區(qū)域。注意，該屬性值并非所有瀏覽器都支持。

在demo中嘗試border-image-repeat不同的屬性值（space屬性值僅作為未來(lái)特性，并非所有瀏覽器都支持）。
使用漸變形狀
所有支持border-image的瀏覽器均支持CSS 漸變。你可以使用任意形式的漸變來(lái)制作邊框。demo展示了一個(gè)重復(fù)線性漸變的條狀邊框（鼠標(biāo)滑過(guò)還可改變顏色）。
瀏覽器會(huì)裁剪該漸變形狀，正如裁剪一個(gè)正方形圖片，使得寬度與高度和border-image-width相等。
使用SVG
使用柵格圖像與使用SVG作為邊框圖片，最大的不同是裁剪時(shí)如何測(cè)量。
在SVG圖片中無(wú)單位數(shù)值代表坐標(biāo)。
百分比數(shù)值表示與圖片尺寸有關(guān)。
若SVG沒(méi)有定義尺寸，則會(huì)被默認(rèn)尺寸算法測(cè)量，該算法會(huì)使用設(shè)置的border-image-outset屬性值作為默認(rèn)尺寸。在實(shí)際應(yīng)用中這個(gè)問(wèn)題可能會(huì)造成困擾，所以請(qǐng)盡可能為SVG設(shè)置尺寸。
邊框圖片的鏈接
你可以像border-image-source鏈接?xùn)鸥駡D片一樣，將屬性值設(shè)為SVG文件的鏈接。 .module{border-image-source: url(border.png);border-image-slice: 20;border-image-width: 20;border-image-outset: 1;border-image-repeat: round;}

?

這應(yīng)該是將SVG作為邊框圖片的最好方法。所有支持border-image的現(xiàn)代瀏覽器都會(huì)支持border-image-source的值為SVG文件的鏈接。
inline
你可以使用Base64對(duì)SVG邊框圖片進(jìn)行編碼，或者將SVG標(biāo)簽直接寫(xiě)入border-image-source，但這兩種方式都存在不小的問(wèn)題。
64位編碼的SVG存在很多問(wèn)題，詳情見(jiàn)[Probably Don't Base64 SVG](https://css-tricks.com/probably-dont-base64-svg/)。
在border-image中直接寫(xiě)入SVG標(biāo)簽同樣存在問(wèn)題：IE瀏覽器無(wú)法識(shí)別，而Firefox的支持也很怪異（[見(jiàn)Bug 619500](https://css-tricks.com/probably-dont-base64-svg/)）。
demo中的邊框圖片是一個(gè)行內(nèi)SVG漸變形狀。如果檢查CSS你會(huì)發(fā)現(xiàn)標(biāo)簽被小心地創(chuàng)建-標(biāo)簽外使用雙引號(hào)，標(biāo)簽內(nèi)使用單引號(hào)，并且在16進(jìn)制顏色中不使用#.
利用單一重復(fù)圖片實(shí)現(xiàn)邊框
這樣的效果人們會(huì)認(rèn)為border-image屬性很容易實(shí)現(xiàn)，可實(shí)際上實(shí)現(xiàn)的過(guò)程多少有點(diǎn)反直覺(jué)。
例如，你想為元素添加心型圖標(biāo)的邊框。如果使用的圖片只有一個(gè)心型，效果是無(wú)法實(shí)現(xiàn)的。你必須擁有一張圖片，其中心型圖標(biāo)的排列效果和預(yù)期的邊框效果一致，這時(shí)才能剪裁圖片。 （包含8個(gè)相同圖標(biāo)的源圖片）
如果你認(rèn)為這聽(tīng)起來(lái)很荒謬，那你就擁有了很多支持者。幾年前的一篇博客-lengthy discussion of the subject onEric Myer's blog，其中討論了許多前端方面的發(fā)展。
demo中，一個(gè)心形圍繞div的邊框重復(fù)排列。而源圖片中包含了8個(gè)相同的心形圖標(biāo)，源圖片被裁剪后元素的每條邊都由完整的心形裝飾。
更多應(yīng)用
盡管對(duì)border-image的支持已經(jīng)增強(qiáng)-所有現(xiàn)代瀏覽器均已實(shí)現(xiàn)了不帶前綴的支持，設(shè)置一個(gè)備用的border樣式仍是值得的。如果瀏覽器不支持border-image，或邊框圖片加載失敗，設(shè)置的邊框樣式會(huì)被瀏覽器使用。
border-image屬性無(wú)法像其他屬性一樣實(shí)現(xiàn)動(dòng)畫(huà)效果，border-radius同樣無(wú)法實(shí)現(xiàn)。
如果你聲明了border-image-source和border的寬度或者border-image-width，同時(shí)沒(méi)有任何剪裁設(shè)置，整個(gè)未裁剪的圖片就會(huì)被放置在元素的四個(gè)邊角，并放大至你指定的寬度。 相關(guān)鏈接

• 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

轉(zhuǎn)載于:https://www.cnblogs.com/panshijie205/p/6851759.html

總結(jié)

以上是生活随笔為你收集整理的CSS border-image属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。