一篇文章中，小海前端（頭條號）為小伙伴們介紹了CSS3中新增的border-image屬性，該屬性主要用于為容器的邊框添加圖片。本篇文章，繼續(xù)為大家講解該屬性的用法和CSS3中對該屬性的一些細(xì)節(jié)要求。

尚未閱讀上一篇文章的小伙伴請先閱讀上一篇文章，上一篇文章講解了border-image屬性及其派生屬性的基礎(chǔ)用法。

承接文章：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一種新穎的用法

技術(shù)等級：中級 | 適合有一定的CSS基礎(chǔ)的人士閱讀。

該組屬性的兼容性暫時(shí)還不是特別好，建議大家使用火狐瀏覽器（Firefox）來嘗試該屬性的各個(gè)效果。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

本篇文章涉及到的CSS3屬性問題：

• border-image-slice屬性的使用細(xì)節(jié)

• border-outset屬性的用法

• border-image-width屬性和border-width屬性的區(qū)別

• border-image屬性和border屬性的沖突性

• 各個(gè)瀏覽器內(nèi)核的兼容性

一、border-image-slice屬性的使用細(xì)節(jié)：

上一篇文章中講到，border-image-slice是用來設(shè)置邊框圖片的切片屬性的。該屬性的取值為一個(gè)不帶單位的數(shù)值，默認(rèn)單位為像素，但是不用書寫px。該屬性設(shè)置的數(shù)值可以將邊框圖片劃分為9個(gè)區(qū)域，并貼到邊框的9個(gè)不同位置。

這里還以上一篇文章中寬度和高度均為90像素的圖片為例，該圖片存放在一個(gè)名為images的文件夾中，圖片的文件名為ball.jpg，圖片中每個(gè)圓形的直徑均為30像素。

素材圖 ball.jpg

對于該屬性，CSS3對于它的使用方法還有以下幾個(gè)細(xì)節(jié)要求：

切片偏移之和與圖片寬高的關(guān)系

當(dāng)切片的上下偏移之和大于等于圖像的高度，且左右偏移之和大于等于圖像的寬度。則容器只有四個(gè)角可以獲得邊框圖片的切片，而容器的邊無法獲得任何圖片。

CSS代碼如下所示：

border-image:url(../images/ball.jpg) 60 70 50 30/30px round

上述代碼指出，上切片尺寸為60像素，右切片尺寸為70像素，下切片尺寸為50像素，左切片尺寸為30像素。上下切片的偏移之和為110像素，左右切片的偏移之和為100像素，這兩個(gè)值均超過了圖片90像素的寬高尺寸。因此只有容器的四個(gè)角可以得到邊框圖像。最終效果如下圖所示：

實(shí)體效果圖

切片偏移量與圖片寬高的關(guān)系

當(dāng)切片的上下偏移量都大于等于圖像的高度，且左右偏移量都大于等于圖像的寬度。則容器的四個(gè)角可以獲得完整的邊框圖像。

CSS代碼如下所示：

border-image:url(../images/ball.jpg) 90 100 120 130/30px round

上述代碼指出，上切片尺寸為90像素，右切片尺寸為100像素，下切片尺寸為120像素，左切片尺寸為130像素。每一個(gè)方向的切片偏移量均大于等于圖片90像素的寬度和高度值。因此容器的四個(gè)角可以獲得完整的邊框圖像。同樣，邊依然無法得到任何切片圖像。

最終效果如下圖所示：

實(shí)體效果圖

邊框圖片中5號圓形的顯示與隱藏

border-image-slice屬性還有一個(gè)可以放在切片數(shù)量后面的取值。當(dāng)具有該取值并設(shè)置為“fill”時(shí)，邊框圖片中5號圓形就會顯示在容器的內(nèi)部。如果沒有該取值，邊框圖片中5號圓形就不會顯示在容器內(nèi)部。

CSS代碼如下所示：

border-image:url(../images/ball.jpg) 30 fill/30px round

最終效果如下圖所示：

實(shí)體效果圖

二、border-outset屬性的用法：

該屬性用來對邊框圖像實(shí)現(xiàn)向外擴(kuò)張的效果。該屬性的取值為帶有單位的數(shù)值。同時(shí)該屬性也是可以結(jié)合border-image屬性單獨(dú)使用的。

CSS代碼如下所示：

border-image:url(../images/ball.jpg) 30/30px round

border-outset:30px;

上述代碼會讓邊框圖像在顯示的同時(shí)向外擴(kuò)張30像素。請小伙伴們自行操作并嘗試。

三、border-image-width屬性和border-width屬性的區(qū)別：

border-width屬性可以單獨(dú)使用，適用于設(shè)置具有顏色的邊框?qū)挾取?/p>

border-image-width屬性不可以單獨(dú)使用，必須在border-image屬性取值內(nèi)部固定的位置處使用。該屬性主要用于設(shè)置具有圖像的邊框?qū)挾取?/p>

這兩個(gè)屬性是可以同時(shí)使用的。

當(dāng)容器內(nèi)部具備文本內(nèi)容時(shí)，我們發(fā)現(xiàn)，文本內(nèi)容出現(xiàn)在了邊框圖片的位置處。為了方便小伙伴們觀察，我把文本內(nèi)容調(diào)整成了黃色。如下圖的左側(cè)部分。

實(shí)體效果圖

此時(shí)調(diào)整border-width屬性，為了讓邊框?qū)挾壬В€需要設(shè)置邊框樣式border-style。為了不讓容器的大小發(fā)生變化，添加box-sizing屬性。為了便于查看，我把文本內(nèi)容調(diào)整成了紅色。如上圖右側(cè)部分。

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規(guī)定，帶有顏色的邊框和邊框圖片不得同時(shí)存在，并且當(dāng)border-image屬性和border屬性同時(shí)存在時(shí)，border-image是不起作用的。

CSS代碼如下所示。

border-image:url(../images/ball.jpg) 30/30px round;

border:solid 10px #ff5857;

上述代碼執(zhí)行后，容器會帶有10像素的邊框，而不帶有邊框圖片。小伙伴們可以自行嘗試。

五、各個(gè)瀏覽器內(nèi)核的兼容性：

CSS3的屬性中還有許多都是瀏覽器不能完全兼容的，有的屬性兼容部分瀏覽器，有的屬性被瀏覽器部分兼容。那么，要對所有的瀏覽器都得到相同的外觀，應(yīng)該如何處理呢？

可以采用為CSS屬性的兼容性前綴來解決這個(gè)問題。

• -ms-，適用于具有Trident內(nèi)核的IE系列瀏覽器。

• -webkit-，適用于具有webkit內(nèi)核的瀏覽器，例如Safari瀏覽器、360安全瀏覽器等。

• -moz-，適用于Firefox瀏覽器。

• -o-，適用于Opera瀏覽器。

因此，border-image屬性要實(shí)現(xiàn)瀏覽器全兼容可以使用下列代碼：

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

不過通過實(shí)際操作，我發(fā)現(xiàn)border-image屬性即使加上了瀏覽器兼容性前綴，也不能達(dá)到滿意的效果。CSS3中還有許多屬性都不能達(dá)到最滿意的兼容性，我們只能等待CSS3完備的計(jì)劃出臺，并盡快得到大部分瀏覽器廠商的支持和認(rèn)可。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。

文章預(yù)告

下一篇文章中，小海前端（頭條號）會為小伙伴們講解CSS3中實(shí)現(xiàn)多列布局的屬性。這組屬性解決了在CSS2時(shí)必須要對容器進(jìn)行浮動才能在一行內(nèi)顯示多列的問題。希望小伙伴們不要錯(cuò)誤。

SS3 的邊框?qū)傩钥梢越o創(chuàng)建圓角的盒子，也可以給盒子設(shè)置陰影，用圖片美化盒子。

border-radius 圓角

border-radius可以給元素設(shè)置圓角。

如下，一個(gè)div元素：

<div class="box">border-radius可以給元素設(shè)置圓角。</div>

我們給它加一點(diǎn)樣式，并設(shè)置它的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也可以給它四個(gè)角分別設(shè)置角度，四個(gè)值依次代表左上，右上，右下，左下：

border-radius: 15px 15px 0px 0px;

box-shadow 邊框陰影

box-shadow可以為元素設(shè)置邊框陰影。box-shadow設(shè)置的屬性如下：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 水平陰影的位置，可以是負(fù)值。

v-shadow 垂直陰影的位置，可以是負(fù)值。

blur 模糊距離。

spread 陰影的尺寸。

color 陰影的顏色。

inset 將外部陰影 (outset) 改為內(nèi)部陰影。

以上 h-shadow ，v-shadow是必須要設(shè)置的，其他的可以根據(jù)需要去設(shè)置。

我們給上面的div元素添加陰影：

<div class="box"></div>

css樣式：

.box{

width: 284px;

height: 100px;

background: #f60;

box-shadow: 10px 10px 5px #ccc;

}

瀏覽器中查看效果：

border-image 圖片

border-image 使用圖片設(shè)置邊框。

如下：

<div class="box"></div>

我們先給div元素的邊框顏色設(shè)置為透明（transparent），然后在使用圖片設(shè)置邊框：

.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-這樣的前綴呢？這是因?yàn)楹枚酁g覽器都不支持CSS的新特性，所以寫這些專屬的前綴是為了兼容各瀏覽器。

上一篇CSS3文章最后也講過各瀏覽器的前綴，童靴們自己去看一下。

css3 入門簡介 ——css3開課啦！

當(dāng)你感到悲哀痛苦時(shí)，最好是去學(xué)些什么東西。學(xué)習(xí)會使你永遠(yuǎn)立于不敗之地。

關(guān)注小白前端，持續(xù)收到文章推送！