整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一篇文章中，小海前端（頭條號）為小伙伴們介紹了CSS3中新增的border-image屬性，該屬性主要用于為容器的邊框添加圖片。本篇文章，繼續為大家講解該屬性的用法和CSS3中對該屬性的一些細節要求。
尚未閱讀上一篇文章的小伙伴請先閱讀上一篇文章，上一篇文章講解了border-image屬性及其派生屬性的基礎用法。
承接文章：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一種新穎的用法
技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。
該組屬性的兼容性暫時還不是特別好，建議大家使用火狐瀏覽器（Firefox）來嘗試該屬性的各個效果。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
本篇文章涉及到的CSS3屬性問題：
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像素。
素材圖 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像素的寬度和高度值。因此容器的四個角可以獲得完整的邊框圖像。同樣，邊依然無法得到任何切片圖像。
最終效果如下圖所示：
實體效果圖
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時必須要對容器進行浮動才能在一行內顯示多列的問題。希望小伙伴們不要錯誤。
SS3 的邊框屬性可以給創建圓角的盒子，也可以給盒子設置陰影，用圖片美化盒子。
border-radius可以給元素設置圓角。
如下，一個div元素：
<div class="box">border-radius可以給元素設置圓角。</div>
我們給它加一點樣式，并設置它的border-radius為15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
}
瀏覽器中查看效果：
border-radius也可以給它四個角分別設置角度，四個值依次代表左上，右上，右下，左下：
border-radius: 15px 15px 0px 0px;
box-shadow可以為元素設置邊框陰影。box-shadow設置的屬性如下：
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平陰影的位置，可以是負值。
v-shadow 垂直陰影的位置，可以是負值。
blur 模糊距離。
spread 陰影的尺寸。
color 陰影的顏色。
inset 將外部陰影 (outset) 改為內部陰影。
以上 h-shadow ，v-shadow是必須要設置的，其他的可以根據需要去設置。
我們給上面的div元素添加陰影：
<div class="box"></div>
css樣式：
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
}
瀏覽器中查看效果：
border-image 使用圖片設置邊框。
如下：
<div class="box"></div>
我們先給div元素的邊框顏色設置為透明（transparent），然后在使用圖片設置邊框：
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
}
看一下效果：
童靴們可能不懂為啥屬性的前邊會有-webkit-、-o-這樣的前綴呢？這是因為好多瀏覽器都不支持CSS的新特性，所以寫這些專屬的前綴是為了兼容各瀏覽器。
上一篇CSS3文章最后也講過各瀏覽器的前綴，童靴們自己去看一下。
css3 入門簡介 ——css3開課啦！
當你感到悲哀痛苦時，最好是去學些什么東西。學習會使你永遠立于不敗之地。
關注小白前端，持續收到文章推送！
文素材來自于網絡，若與實際情況不相符或存在侵權行為，請聯系刪除。
在搭建公司網站時，會用到一些邊框，無論是表格還是div。布局時，邊框可以作為分割線，對內容進行對比或偏移。更明顯。使用邊框實際上非常簡單。一是邊框的粗細，二是邊框的顏色。您可以設置本地和常規設置，也可以單獨設置上下左右四個方向的邊框。 CSS中有一個關于顏色的屬性：border-color，它一次最多可以接受4個顏色值。
邊框顏色值：[<顏色>|透明]{1,4} |繼承初始值：未定義速記屬性計算值：單個屬性（border-top-color，top-border-color）
如果網頁設計的邊界值少于 4 個，則值復制有效。如果設計者希望H1元素有細的黑色上下邊框和粗的灰色左右邊框，CSS樣式應該這樣寫：
h1 { 邊框樣式：實心；邊框寬度：細；邊框顏色：黑灰色；}
當然，所有 4 個頁面都會應用一個顏色值，如果應用 4 個顏色值，那么每個頁面都會有不同的顏色。可以使用任何類型的顏色值，例如它可以是命名顏色，或十六進制和 RGB 值：
p {
邊框樣式：實心；邊框寬度：粗；
邊框顏色: blackrgb(25%, 25%, 25%) # 808080 銀色;}
您還可以使用快捷方式一次定義多個邊界，例如為特定段落設置 P：
P {
border:#cecece1pxsolid;//四個邊框均為灰色1px
}
還有一些單頁邊框顏色屬性。原理與單頁樣式和寬度屬性相同。網站構建者必須為標題指定純黑色邊框，正確的邊框是純灰色邊框。這可以指定如下：
P { 邊框樣式：實心；邊框顏色：黑色；右邊框顏色：灰色；}
邊界四個方向對應的屬性名稱：
上邊框上顏色、右邊框右顏色、下邊框下顏色、左邊框左顏色
透明邊框的使用：在某些情況下，網站作者想要創建不可見的邊框。這使得邊框顏色值透明（在 CSS2 中引入）。該值用于創建不可見的寬度邊框。假設您希望一組 3 個鏈接具有邊框。默認情況下，這些邊框是不可見的，但當鼠標懸停在鏈接上時，邊框應升起。您可以通過在鏈接未懸停時使邊框透明來實現此目的：
a:鏈接,a:訪問{
邊框樣式：實心；邊框寬度：5px；邊框顏色：透明；}
a:懸停{邊框顏色:灰色;}
使用透明時，邊框的使用可充當額外的填充，還有一個額外的好處，即在需要時使其可見。此透明邊框充當填充，因為元素的背景延伸到邊框區域（假設它是可見背景）。
注意：IE7之前，IE/Win不支持透明。在以前的版本中，IE 會根據元素的顏色值設置邊框顏色。
免責聲明：以上內容資料均來源于網絡，本文作者無意針對，影射任何現實國家，政體，組織，種族，個人。相關數據，理論考證于網絡資料，以上內容并不代表本文作者贊同文章中的律法，規則，觀點，行為以及對相關資料的真實性負責。本文作者就以上或相關所產生的任何問題概不負責，亦不承擔任何直接與間接的法律責任。
文章內容如涉及作品內容、版權圖片，侵權，謠言或其它問題請聯系刪除。最后，大家對于這個事件有什么不同的想法，歡迎評論區留言討論
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
