容器邊框圖片的細節要求，CSS3屬性的瀏覽器兼容性設置，新手必學
上一篇文章中，小海前端（頭條號）為小夥伴們介紹了CSS3中新增的border-image屬性，該屬性主要用於為容器的邊框添加圖片。本篇文章，繼續為大家講解該屬性的用法和CSS3中對該屬性的一些細節要求。
尚未閱讀上一篇文章的小夥伴請先閱讀上一篇文章，上一篇文章講解了border-image屬性及其派生屬性的基礎用法。
承接文章：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一種新穎的用法
技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。
該組屬性的兼容性暫時還不是特別好，建議大家使用火狐瀏覽器（Firefox）來嘗試該屬性的各個效果。
希望收藏了這篇文章的你同時也可以關注一下「小海前端」的頭條號，因為這些文章都是連載的，並且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
本篇文章涉及到的CSS3屬性問題：
Advertisements
border-image-slice屬性的使用細節
border-outset屬性的用法
border-image-width屬性和border-width屬性的區別
border-image屬性和border屬性的衝突性
各個瀏覽器內核的兼容性
一、border-image-slice屬性的使用細節：
上一篇文章中講到，border-image-slice是用來設置邊框圖片的切片屬性的。該屬性的取值為一個不帶單位的數值，默認單位為像素，但是不用書寫px。該屬性設置的數值可以將邊框圖片劃分為9個區域，並貼到邊框的9個不同位置。
這裡還以上一篇文章中寬度和高度均為90像素的圖片為例，該圖片存放在一個名為images的文件夾中，圖片的文件名為ball.jpg，圖片中每個圓形的直徑均為30像素。
Advertisements
素材圖 ball.jpg
對於該屬性，CSS3對於它的使用方法還有以下幾個細節要求：
切片偏移之和與圖片寬高的關係
當切片的上下偏移之和大於等於圖像的高度，且左右偏移之和大於等於圖像的寬度。則容器只有四個角可以獲得邊框圖片的切片，而容器的邊無法獲得任何圖片。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 60 70 50 30/30px round
上述代碼指出，上切片尺寸為60像素，右切片尺寸為70像素，下切片尺寸為50像素，左切片尺寸為30像素。上下切片的偏移之和為110像素，左右切片的偏移之和為100像素，這兩個值均超過了圖片90像素的寬高尺寸。因此只有容器的四個角可以得到邊框圖像。最終效果如下圖所示：
實體效果圖
切片偏移量與圖片寬高的關係
當切片的上下偏移量都大於等於圖像的高度，且左右偏移量都大於等於圖像的寬度。則容器的四個角可以獲得完整的邊框圖像。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 90 100 120 130/30px round
上述代碼指出，上切片尺寸為90像素，右切片尺寸為100像素，下切片尺寸為120像素，左切片尺寸為130像素。每一個方向的切片偏移量均大於等於圖片90像素的寬度和高度值。因此容器的四個角可以獲得完整的邊框圖像。同樣，邊依然無法得到任何切片圖像。
最終效果如下圖所示：
實體效果圖
邊框圖片中5號圓形的顯示與隱藏
border-image-slice屬性還有一個可以放在切片數量後面的取值。當具有該取值並設置為「fill」時，邊框圖片中5號圓形就會顯示在容器的內部。如果沒有該取值，邊框圖片中5號圓形就不會顯示在容器內部。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30 fill/30px round
最終效果如下圖所示：
實體效果圖
二、border-outset屬性的用法：
該屬性用來對邊框圖像實現向外擴張的效果。該屬性的取值為帶有單位的數值。同時該屬性也是可以結合border-image屬性單獨使用的。
CSS代碼如下所示：
border-image:url(../images/ball.jpg) 30/30px round
border-outset:30px;
上述代碼會讓邊框圖像在顯示的同時向外擴張30像素。請小夥伴們自行操作並嘗試。
三、border-image-width屬性和border-width屬性的區別：
border-width屬性可以單獨使用，適用於設置具有顏色的邊框寬度。
border-image-width屬性不可以單獨使用，必須在border-image屬性取值內部固定的位置處使用。該屬性主要用於設置具有圖像的邊框寬度。
這兩個屬性是可以同時使用的。
當容器內部具備文本內容時，我們發現，文本內容出現在了邊框圖片的位置處。為了方便小夥伴們觀察，我把文本內容調整成了黃色。如下圖的左側部分。
實體效果圖
此時調整border-width屬性，為了讓邊框寬度生效，還需要設置邊框樣式border-style。為了不讓容器的大小發生變化，添加box-sizing屬性。為了便於查看，我把文本內容調整成了紅色。如上圖右側部分。
CSS代碼如下所示：
border-image: url(../images/ball.jpg) 30/30px round;
border-width: 30px;
border-style: solid;
box-sizing: border-box;
color:#ff0000;
四、border-image屬性和border屬性的衝突性：
CSS3規定，帶有顏色的邊框和邊框圖片不得同時存在，並且當border-image屬性和border屬性同時存在時，border-image是不起作用的。
CSS代碼如下所示。
border-image:url(../images/ball.jpg) 30/30px round;
border:solid 10px #ff5857;
上述代碼執行后，容器會帶有10像素的邊框，而不帶有邊框圖片。小夥伴們可以自行嘗試。
五、各個瀏覽器內核的兼容性：
CSS3的屬性中還有許多都是瀏覽器不能完全兼容的，有的屬性兼容部分瀏覽器，有的屬性被瀏覽器部分兼容。那麼，要對所有的瀏覽器都得到相同的外觀，應該如何處理呢？
可以採用為CSS屬性的兼容性前綴來解決這個問題。
-ms-，適用於具有Trident內核的IE系列瀏覽器。
-webkit-，適用於具有webkit內核的瀏覽器，例如Safari瀏覽器、360安全瀏覽器等。
-moz-，適用於Firefox瀏覽器。
-o-，適用於Opera瀏覽器。
因此，border-image屬性要實現瀏覽器全兼容可以使用下列代碼：
border-image:url(../images/ball.jpg) 30/30px round
-webkit-border-image:url(../images/ball.jpg) 30/30px round
-moz-border-image:url(../images/ball.jpg) 30/30px round
-o-border-image:url(../images/ball.jpg) 30/30px round
-ms-border-image:url(../images/ball.jpg) 30/30px round
不過通過實際操作，我發現border-image屬性即使加上了瀏覽器兼容性前綴，也不能達到滿意的效果。CSS3中還有許多屬性都不能達到最滿意的兼容性，我們只能等待CSS3完備的計劃出台，並儘快得到大部分瀏覽器廠商的支持和認可。
小海聲明
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下「小海前端」的頭條號，因為這些文章都是連載的，並且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注「小海前端」，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
文章預告
下一篇文章中，小海前端（頭條號）會為小夥伴們講解CSS3中實現多列布局的屬性。這組屬性解決了在CSS2時必須要對容器進行浮動才能在一行內顯示多列的問題。希望小夥伴們不要錯誤。