深入淺出CSS3 background-clip,background-origin和border-image教程
發(fā)布時(shí)間：2011-01-27 12:14:49 作者：佚名 
我要評(píng)論
我要評(píng)論最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔和說明發(fā)現(xiàn)很多臆想中的效果都實(shí)現(xiàn)不了。
已兼容IE！之前不能兼容IE，給您的閱讀帶來不便十分抱歉，Sorry
一．這篇博客的初衷
最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔和說明發(fā)現(xiàn)很多臆想中的效果都實(shí)現(xiàn)不了。于是嘗試在百度中搜素，結(jié)果資料也是少的可憐，反復(fù)轉(zhuǎn)載的只有一篇來自懌飛博客的《 background-clip與background-origin 的一則運(yùn)用》
,但畢竟是幾年前的文章，其中的部分內(nèi)容已經(jīng)不適用于現(xiàn)在的標(biāo)準(zhǔn)了，其他的搜索結(jié)果也不是很理想于是乎只好自己動(dòng)手豐衣足食?；艘恢亮藘商彀堰@個(gè)內(nèi)容消化。同時(shí)把要點(diǎn)和精總結(jié)在這篇博客中，給自己和大家做一個(gè)參考。
二．從傳統(tǒng)的多圖像背景技術(shù)談起
在CSS3之前，2.0也好，2.1也罷。要想給一個(gè)塊級(jí)元素添加圓角或是陰影,又或是一個(gè)比較復(fù)雜的背景圖像(比如多邊形，多紋路)都是相當(dāng)困難的一件事。在這里先列舉兩個(gè)例子，有關(guān)如何組織復(fù)雜的背景和陰影效果。一方面是為了照顧一些入門web的朋友，另一方面也為了和后面這兩個(gè)技術(shù)的應(yīng)用做一個(gè)對(duì)比，做一個(gè)承上啟下的作用。熟練的朋友可以跳過這一節(jié)，直接從下一節(jié)開始閱讀
1.請(qǐng)大家先看這樣一個(gè)效果：
注意文字的背景，大家有沒有主意如何實(shí)現(xiàn)？一個(gè)最普通不過的想法是，我就按我需要的文字的長(zhǎng)度，用photoshop做一個(gè)包含左右半圓形狀的完整一體圖片。但問題是，如果我文字的長(zhǎng)度需要更改，變得更長(zhǎng)或者更短時(shí)應(yīng)該怎么辦？為了不影響美觀，我們又不得不把圖片放回photoshop中返工？雖然不排除這是一種辦法。但要是有非常多的頁面和框背景需要用到這個(gè)圖片，那工作量會(huì)是非常巨大的。很明顯這是得不償失的。于是我們會(huì)想，手動(dòng)的讓圖片適應(yīng)文字麻煩，要是能讓圖片自動(dòng)能適應(yīng)文字，是絕對(duì)的事半功倍。那究竟有沒有這樣一種方法呢？
注意文字的背景，大家有沒有主意如何實(shí)現(xiàn)？一個(gè)最普通不過的想法是，我就按我需要的文字的長(zhǎng)度，用photoshop做一個(gè)包含左右半圓形狀的完整一體圖片。但問題是，如果我文字的長(zhǎng)度需要更改，變得更長(zhǎng)或者更短時(shí)應(yīng)該怎么辦？為了不影響美觀，我們又不得不把圖片放回photoshop中返工？雖然不排除這是一種辦法。但要是有非常多的頁面和框背景需要用到這個(gè)圖片，那工作量會(huì)是非常巨大的。很明顯這是得不償失的。于是我們會(huì)想，手動(dòng)的讓圖片適應(yīng)文字麻煩，要是能讓圖片自動(dòng)能適應(yīng)文字，是絕對(duì)的事半功倍。那究竟有沒有這樣一種方法呢？ 答案是肯定的(在這里我們簡(jiǎn)略的談一下關(guān)鍵思路，具體代碼的實(shí)現(xiàn)就不深究了)，為了實(shí)現(xiàn)這個(gè)效果，通常我們只需要三幅圖：
和
和
。具體原理如圖所示：
和和。具體原理如圖所示：
相信看到圖之后有朋友應(yīng)該有不少已經(jīng)心領(lǐng)神會(huì)了：我們?cè)谠瓉砦ㄒ灰粋€(gè)用來存放文字的div中，又插入了三個(gè) div:div#left,div#center,div#right。其中#left和#right分別用來存放半圓形的左右邊緣且固定寬度，而中間的#center用來存放文字，背景采用repeat-x定位，且不定位寬度，再通過其它c(diǎn)ss設(shè)置讓它能收縮緊貼內(nèi)容區(qū)域（content），這樣就能隨著文字的長(zhǎng)短而自如伸縮了。最后通過position或display屬性讓#lef，#center，#right實(shí)現(xiàn)無縫隙的拼接，同時(shí)讓最外層的 div#content也收縮緊貼它包裹的三個(gè)div，然后——大功告成。
這個(gè)技術(shù)的關(guān)鍵在于如何讓存放文字的div#center的伸縮引起外部整個(gè)div#content的的伸縮，且保持#left,#center和#right的布局不被破壞(要無縫才能讓人感覺一體，感覺真是)……當(dāng)然這不屬于我們今天的討論范圍，有興趣的朋友可以參考我之前的一篇《深入理解css盒子模型》。這樣就完成了自動(dòng)伸縮功能。精簡(jiǎn)的代碼如下：
<div class=”content” style=”height:32px;”> /*這個(gè)是伸縮的*/
<div class=”left” style”width:15px; height:32px;”></div>
<div class=”center” style=”height:32px;”>這里存放文字內(nèi)容</div>/*這個(gè)也是可以伸縮的*/
<div class=”right” style=”width:15px; height:32px;”></div>
</div>
但至于如何才能使最外層的容器內(nèi)收縮緊貼內(nèi)部div，使div#center自動(dòng)伸縮，就不在本課的范圍之內(nèi)，大家可以百度，也可以參照我上一篇文字《深入理解box盒子模型》。
復(fù)制代碼
代碼如下:<div class=”content” style=”height:32px;”> /*這個(gè)是伸縮的*/
<div class=”left” style”width:15px; height:32px;”></div>
<div class=”center” style=”height:32px;”>這里存放文字內(nèi)容</div>/*這個(gè)也是可以伸縮的*/
<div class=”right” style=”width:15px; height:32px;”></div>
</div>
但至于如何才能使最外層的容器內(nèi)收縮緊貼內(nèi)部div，使div#center自動(dòng)伸縮，就不在本課的范圍之內(nèi)，大家可以百度，也可以參照我上一篇文字《深入理解box盒子模型》。
例子2.我們先看一個(gè)jQuery插件fancybox的陰影效果：
這是模仿MacOS的效果的一個(gè)插件，由于整張圖片太大，我只是截取了一個(gè)角下來。大家需要注意的重點(diǎn)是白色邊框的外邊緣的陰影效果（可能不是很明顯）——參照上面的例子，您覺得陰影效果是如何實(shí)現(xiàn)的？
對(duì)，還是用九個(gè)盒子拼成的(可能這里有朋友會(huì)想到滑動(dòng)門技術(shù)，的確這也是實(shí)現(xiàn)陰影的方法之一，但為了承上，這里暫且不介紹)，一個(gè)盒子裝的是中間的照片，另外八個(gè)盒子分別裝東，西，南，北，東南，西南，東北，西八個(gè)方向的陰影。這個(gè)不用畫圖，大家應(yīng)該可以想象出來吧。但這個(gè)例子又有不同——這一次有九個(gè)盒子，要是按上一個(gè)例子一樣，在一容中放九個(gè)盒子，再通過浮動(dòng)，定位屬性等來實(shí)現(xiàn)他們無縫拼接，也會(huì)是相當(dāng)繁瑣的一事。因?yàn)橐紤]每一個(gè)盒子周圍的盒子在自己伸縮時(shí)也能適當(dāng)?shù)淖鲆恍┱{(diào)整，不至于出現(xiàn)錯(cuò)位和縫隙。所以的這次的做法是將放陰影的八個(gè)盒子用絕對(duì)定位固定在中間的盒子的八個(gè)方向上，這樣以中心盒子為中心，無論它怎么放大還是縮小，周圍八個(gè)盒子都死死的附屬著它，就再也不用考慮自己周圍的盒子有錯(cuò)位之類的問題。圖例如下：
再看看實(shí)際的定位是不是這樣定位的呢，看看從firebug下的截圖：
再看看其中一個(gè)fancybox-bg-n的具體css:
三，background-clip,background-origin入門
我想說的是，上面的兩個(gè)例子總結(jié)起來只有兩個(gè)字：麻煩。背景明明只關(guān)一個(gè)div的事，結(jié)果硬是要n多個(gè)不相關(guān)的div來輔助完成效果——background-clip,backgrou nd-origin便是我們的救星。要知道CSS3的任何新屬性不是W3C人吃飽了撐的沒事找事想出來來的，它的出現(xiàn)必然性必定是經(jīng)過詳細(xì)驗(yàn)證的且有它必要的價(jià)值。相信當(dāng)您閱讀完這一節(jié)的內(nèi)容后，你就會(huì)開始學(xué)會(huì)如何用新技術(shù)擺脫那些陳舊繁瑣的步有三個(gè)屬性來就不復(fù)雜的效果了。
在開始之前，先做幾點(diǎn)說明，請(qǐng)看：
首先我們要引入幾個(gè)概念(呃，這是我自己翻譯的，不知道對(duì)不對(duì)，可能孤陋寡聞了，請(qǐng)朋友們見諒):內(nèi)容邊緣(content edge),內(nèi)邊距邊緣(padding edge),邊框邊緣(border edge),外邊距邊緣(margin edge)。為了理解，我們可以把內(nèi)邊距，邊框，外邊距看成一個(gè)環(huán)形的容器，并且每個(gè)環(huán)形容器都只有兩條邊，一條沖內(nèi)，一條沖外(內(nèi)和外也是相對(duì)的，好比外邊距的外邊就是邊框的內(nèi)邊)，于是我們把沖外(outer)的那條邊稱為這個(gè)環(huán)形的邊緣(edge)。當(dāng)然因?yàn)閮?nèi)容區(qū)域是“實(shí)心”的，所以不存在內(nèi)外的問題。
origin的翻譯過來時(shí)原始的意思。顧名思義，所以background-origin是用來決定圖片的原始起始位置。它有三個(gè)可選值content-box,padding- box,border-box(background-origin如果寫在css中只有Opera瀏覽器可以識(shí)別，如果希望在火狐或者chrome或 Safari中使用，要使用它們?yōu)g覽器的私有屬性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari)，并且對(duì)應(yīng)的值是content,padding,border,省略了-box)，即你可以選擇背景圖片是從內(nèi)容區(qū)域開始顯示，還是內(nèi)邊距，還是邊框。
舉個(gè)例子，我們有一個(gè)div，關(guān)鍵在定位它的背景圖片，為了讓演示的效果更明顯，我們讓它從左上角開始定位，position:left top并且no-repeat。并且內(nèi)容區(qū)于圖片大小一致，邊框和內(nèi)邊距都設(shè)置為30像素寬。OK,
在沒有加入background-origin之前的代碼為：
.border
{
background:url("images/qwqw_s.jpg");
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
復(fù)制代碼
代碼如下:.border
{
background:url("images/qwqw_s.jpg");
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
設(shè)置background-origin之后的效果圖：
因?yàn)槭窃诨鸷伦龅臏y(cè)試,所以-moz-background-origin代替background-origin,相應(yīng)的屬性所以也去掉了-box
效果和作用已經(jīng)一目了然了：我們看到，當(dāng)background-origin的值為content-box時(shí)，首先會(huì)讓背景圖片的左上角和內(nèi)容邊緣左上角對(duì)齊，padding-box時(shí)，則會(huì)讓背景圖片的左上角和內(nèi)邊距的左上角對(duì)齊。以此類推?？梢奲ackground-origin的值的確是決定背景圖片開始從哪個(gè)區(qū)域開始顯示。但話說回來，如果我沒有設(shè)置任何的background-origin屬性的話，它默認(rèn)的起始位置在哪呢？這里就不演示了，但有必要記住——padding。
有一點(diǎn)要十分的注意：如果背景不是no-repeat的話，這個(gè)屬性是無效的。它會(huì)從border-box區(qū)域開始顯示，這一點(diǎn)很重要。
background-origin屬性就先介紹到這里。應(yīng)該不難吧。下面繼續(xù)介紹background-clip。之所以沒有把這兩個(gè)屬性分為兩節(jié)分別介紹，因?yàn)閷?shí)戰(zhàn)的經(jīng)驗(yàn)告訴我這兩個(gè)屬性應(yīng)該是相互搭配才能相得益彰。
clip原意為裁剪，截取。同樣顧名思義，background-origin的作用為將背景圖片做適當(dāng)?shù)牟眉?，以適應(yīng)需要。當(dāng)然這里并不是真正意義上的把圖片給裁剪了，而是根據(jù)屬性值。把圖片的某些部位做適當(dāng)?shù)碾[蔽。background-clip與origin的可選擇一樣，也是有content- box,padding-box,border-box(要注意在火狐和Chrome和Safari中，需要使用私有屬性，加上-mox-和 -webkit-,這里就不贅述了，參考解釋background-clip的內(nèi)容)。怎樣個(gè)剪裁法呢。根據(jù)你設(shè)置的盒子部位，那么圖片在這個(gè)部位的外邊緣以外的部分都會(huì)不可見。舉個(gè)具體例子，圖片起始位置和上面的例子一樣，比如是從border-box開始，但我background-clip設(shè)置的值是content-box，在content之外，也就是border-box內(nèi)，padding-box內(nèi)的圖片內(nèi)容統(tǒng)統(tǒng)不可見。盡管你是讓圖片從邊框開始顯示。實(shí)例如下
.border
{
background:url("images/qwqw_s.jpg") black;
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
background-clip: content-box;
background-origin: border-box;
-moz-background-clip: content;
-moz-background-origin: border;
-webkit-background-clip: content;
-webkit-background-origin: border;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
.border
{
background:black;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
.border
{
background:url("images/tool-bar/bg_b_c.png");/*添加背景*/
background-repeat:repeat-x;
background-position:center;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: content; /*firefox中background-origin沒有content這個(gè)屬性，其實(shí)現(xiàn)在的值是padding。在其他瀏覽器中是有效的*/
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
復(fù)制代碼
代碼如下:.border
{
background:url("images/qwqw_s.jpg") black;
background-repeat:no-repeat;
background-position:left top;
border-width:30px;
border-style:dashed;
border-color:red;
background-clip: content-box;
background-origin: border-box;
-moz-background-clip: content;
-moz-background-origin: border;
-webkit-background-clip: content;
-webkit-background-origin: border;
width:180px;
height:254px;
padding:30px;
margin:0 auto;
}
正如以上所說，我們可以看見雖然圖片是從頂著邊框的左上角進(jìn)行定位，但是裁剪屬性background-clip的屬性是設(shè)置為content-box,所以只有content區(qū)域的內(nèi)容看得見，也就是只要是在content之外的圖片內(nèi)容都被隱蔽掉了。
我之所以要在不同瀏覽器下進(jìn)行測(cè)試( Firefox/3.6.3，Google：7.0.517.24， Opera/9.80, Safari：5.0.1)，答案也在圖上，我們看到在火狐下的結(jié)果和其他瀏覽器結(jié)果竟然不一樣。明明background-clip設(shè)置的屬性是content-box，但卻沒有圖片的任何部位被屏蔽。我想說的是：在火狐下-moz-background-clip屬性是沒有content這一值的(但是padding和border還是有的)，在firebug中可以看到，-moz-background-clip的值直接是border，當(dāng)你強(qiáng)行改為content時(shí)，這條屬性會(huì)直接從bug中消失。當(dāng)然這只是在 3.6.3版本下的結(jié)果，至于在4.0版本中表現(xiàn)如何(雖然只是beta版)?？梢宰孕袦y(cè)試
四．實(shí)戰(zhàn)
在學(xué)習(xí)了基本background-clip和background-origin用法和原理之后，我們將通過操作一個(gè)實(shí)際的例子，來加深我們的學(xué)習(xí)：
這個(gè)圓角背景是由三部分組成：
和
和
(呃，其實(shí)是從Webqq2.0網(wǎng)站上撬下來的，就是上面的工具條……但是作為教學(xué)用，應(yīng)該無傷大雅吧……)，思路和開篇的那個(gè)黑背景制作過程是一樣的，左右固定，中間窄的repeat-x。但是這會(huì)不用插入三個(gè)div，又要設(shè)置float,又要設(shè)置display考慮布局那么麻煩。
步驟一：
先搭建一個(gè)框架出來，給一個(gè)布局。不著急把圖片插入進(jìn)去。主意看以下代碼，有幾點(diǎn)需要說明的：因?yàn)閮H需在盒子左右兩側(cè)插入背景，且恰好為左右要插入圖片的寬度(如果不恰好為那么寬呢？那么不會(huì)成功的，因?yàn)閏ss3中還沒有屬性能控制圖片在邊框中的定位，你會(huì)想不是有background- position屬性嗎？要注意那個(gè)是控制圖片在整個(gè)盒子中的定位。還是不信的話你可以親自試試)；還有就是padding的值也是可以不用設(shè)置的，是為了與上面的例子盡力保持一致，方便大家對(duì)比學(xué)習(xí) margin也是為了讓盒子居中而已，可以忽略；最后border-style和border-color也是方便大家理解布局才添加上去的。
復(fù)制代碼
代碼如下:.border
{
background:black;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
步驟二：
這一步很簡(jiǎn)單，就是把中間需要x軸重復(fù)的圖片添加上去，并且把黑色背景去掉
復(fù)制代碼
代碼如下:.border
{
background:url("images/tool-bar/bg_b_c.png");/*添加背景*/
background-repeat:repeat-x;
background-position:center;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
步驟三：
這步也很簡(jiǎn)單，就是把中間重復(fù)的背景的左右兩端去掉，為了方便我們下一步在左右邊框中插入需要的圖片。注意這里的
-moz-background-origin的content屬性是無效的，實(shí)際上這里的值是padding。正如在上一節(jié)的最后說道，在火狐中是沒有content這個(gè)屬性的。如果有朋友想要copy這段代碼，記得根據(jù)瀏覽器版本做相應(yīng)的修改，把origin的值content改為 padding，或者把盒子的padding去掉。
復(fù)制代碼
代碼如下:.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: content; /*firefox中background-origin沒有content這個(gè)屬性，其實(shí)現(xiàn)在的值是padding。在其他瀏覽器中是有效的*/
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
步驟四：
這一步還是很簡(jiǎn)單，插入邊框的左右兩張圖片，并設(shè)置好position，repeat，clip等值。注意當(dāng)存在多個(gè)圖片時(shí)，設(shè)置值的格式，用逗號(hào)隔開。
.border
{
background:url("images/tool-bar/bg_b_c.png"),
url("images/tool-bar/bg_b_l.png"),
url("images/tool-bar/bg_b_r.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left center, right center;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
.button
{
background:url("images/Fancybox/fancy_title_main.png"),
url("images/Fancybox/fancy_title_left.png"),
url("images/Fancybox/fancy_title_right.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left,right;
background-clip: padding-box,border-box,border-box;
background-origin:padding-box,border-box,border-box;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 15px;
border-style:dashed;
border-color:transparent;
width:80px;
height:32px;
}
復(fù)制代碼
代碼如下:.border
{
background:url("images/tool-bar/bg_b_c.png"),
url("images/tool-bar/bg_b_l.png"),
url("images/tool-bar/bg_b_r.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left center, right center;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
重要提示！寫到這一步，可以從上圖看到已經(jīng)快大功告成了。把左右的紅色邊框去掉就可以了——那么把 border-color改為none或是直接去掉這句話？不行的。如果不設(shè)置顏色的話邊框就會(huì)變成黑色，因?yàn)檫吙蛴袠邮?，而且樣式還有11px寬啊，所以會(huì)用默認(rèn)的黑色來填充?，F(xiàn)在你可能又會(huì)覺得是邊框樣式border-style的問題，那咱們把樣式去掉，把寬度保留？也不行，因?yàn)槿绻麤]有樣式寬度是無效的，結(jié)果會(huì)如下圖(我們可以從firebug中看到邊框的寬度是0，雖然仍然保留border-width)。所以border- style,border-color,border-width缺一不可！這一點(diǎn)要十分注意！
步驟五：
綜上所述，你可能會(huì)覺得既不能改border-style又不能改border-color豈不是沒轍了？正確答案是——還是修改border-color，別忘了，color還有一個(gè)值transparent，透明。顏色還讓它在，但只要人們看不見就行了。我們實(shí)現(xiàn)它：
復(fù)制代碼
代碼如下:.button
{
background:url("images/Fancybox/fancy_title_main.png"),
url("images/Fancybox/fancy_title_left.png"),
url("images/Fancybox/fancy_title_right.png");
background-repeat:repeat-x,no-repeat,no-repeat;
background-position:center,left,right;
background-clip: padding-box,border-box,border-box;
background-origin:padding-box,border-box,border-box;
-moz-background-clip: padding,border,border;
-moz-background-origin: content,border,border;
border-width:0 15px;
border-style:dashed;
border-color:transparent;
width:80px;
height:32px;
}
OK，徹底大功告成，很簡(jiǎn)單不是嗎。
四．border-image
寫到這里我發(fā)現(xiàn)文章的戰(zhàn)線貌似拉的有點(diǎn)長(zhǎng)了。所以我打算border-image在這里只是作為附加內(nèi)容說明，并不會(huì)深究，盡可能簡(jiǎn)扼一些。開始（所以廢話也簡(jiǎn)扼一些……）：
border-image是定位在邊框上的圖片——那不是和把background-origin屬性設(shè)為border差不多一個(gè)意思？是的，的確有這層含義。但在接下來的說明和例子中，你將看到它的便利之處。
這個(gè)屬性說到底還是在搗鼓一張圖片。先直接看一張說明圖片：
草圖左邊是舉例border-image所使用的圖片，右邊的草圖是比喻一個(gè)盒子。border- image有兩個(gè)值需要設(shè)定，頭一個(gè)是切割屬性(border-image-slice)，最多有四個(gè)值可以設(shè)置，命名規(guī)則和margin、 padding都是一致的，順序上右下左。四個(gè)值對(duì)應(yīng)左邊草圖的不同區(qū)域的寬度，同樣上右下左的順序，也就是2，6，8，4區(qū)域的寬度（4、6區(qū)域?yàn)闄M向長(zhǎng)度，2，8區(qū)域?yàn)閰蚕蜷L(zhǎng)度）。從圖中可知，因?yàn)槭墙患木壒?，只要定義好這四塊的寬度，1、3、9、7區(qū)域的長(zhǎng)寬也就隨之確定。在映射到盒子模型上，從 1到9（除5）正好連成盒子的邊框區(qū)域，這樣盒子的邊框圖片就有著落了。
但還有一個(gè)疑問。如果實(shí)際圖片真如左邊草圖那么小，而實(shí)際盒子真有右邊草圖的那么大，那2、6、8、4區(qū)域的圖片可能就不夠用呀？問得好，所以border-image還提供一種機(jī)制來處理這個(gè)問題——圖片重復(fù)屬性(border-image- repeat)，也叫拉伸值(stretch value)。有四個(gè)值可以選擇：stretch(拉伸且默認(rèn))、repeat（重復(fù)）、round（平鋪）。是不是聽著很耳熟，對(duì)，和電腦壁紙的位置屬性是一樣的。對(duì)每一張border-image最多可以設(shè)置兩個(gè)拉伸屬性如round round。前一個(gè)針對(duì)圖片側(cè)邊(除5區(qū)域以外)，后一個(gè)針對(duì)中間部分，即5區(qū)域。如果只有一個(gè)值的話，則認(rèn)為所以區(qū)域都按照此值布置。若無設(shè)置此屬性，則按默認(rèn)值拉伸(stretch)來布置image。
所以對(duì)應(yīng)上圖，咱們?cè)賮硪粋€(gè)例子，就一目了然了：
回到上節(jié)的那個(gè)例子，這回我們只需要兩張圖片：
和
和 可以看出后面那種圖就是左右兩側(cè)拼接而成的，這回咱們用border-image屬性完成上面的同樣效果，很簡(jiǎn)單，直接看CSS代碼：
.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: padding;
-moz-border-image:url("images/bg_b_l_r.png") 0 11;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:0 30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
----->
復(fù)制代碼
代碼如下:.border
{
background:url("images/tool-bar/bg_b_c.png");
background-repeat:repeat-x;
background-position:center;
-moz-background-clip: padding;
-moz-background-origin: padding;
-moz-border-image:url("images/bg_b_l_r.png") 0 11;
border-width:0 11px; /*為了要適應(yīng)左右兩個(gè)圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
width:180px;
height:90px; /*因?yàn)橐m應(yīng)圖片，所以寬度改小一點(diǎn)*/
padding:0 30px; /*其實(shí)Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}
還是要做幾點(diǎn)說明。因?yàn)樵谶@個(gè)例子中我們只需要左右側(cè)有圖片，所以切割屬性只要將圖片左右切割開去可以了：0 11。在上一節(jié)最后一步的重要提示中，我反復(fù)強(qiáng)調(diào)border-style,border-color,border-width缺一不可。但在這里只需要一個(gè)border-width就足夠了！這就是它的便利之處。但在使用時(shí)要記得不同瀏覽器之間的差異，判斷是否要使用-moz-或-webkit-或 -o-前綴。
再給大家看幾個(gè)驚艷的例子：
----->還有小的：
------->
------->至于具體CSS代碼嘛，其實(shí)很簡(jiǎn)單，這里就給大家賣個(gè)關(guān)子吧。當(dāng)做思考題咯
五．再嘮叨幾句
如果大家在閱讀過程中有什么疑惑，或發(fā)現(xiàn)什么錯(cuò)誤，甚者是錯(cuò)別字，都可以留言給我。我將盡快給大家回復(fù)，修正。很樂意與大家交流。
一直覺得博客園永遠(yuǎn)是.net，c#，MVC之類的后臺(tái)天下。有關(guān)web前端的文章不少，但含金量遠(yuǎn)遠(yuǎn)不如那些多。雖然我學(xué)的是.net方向，但前端始終是摯愛。因?yàn)椴┛蛨@這里前端的資料的匱乏。所以自己一旦遇到了很多前端的問題都只能google國(guó)外的文章，或是去stack overflow（但真的很有效果，回復(fù)的速度快，集思廣益，而且句句錙銖。不像國(guó)內(nèi)全都是“頂”啊，“標(biāo)記”之類的廢話，向大家強(qiáng)烈推薦）。
前端的冷落是不是真的因?yàn)榍岸耸情_源，比如html代碼，只要把想要網(wǎng)站的圖片和樣式copy一下改一改就是了。毫無技術(shù)可言？還是JavaScript和jQuery這種東西和C#、Java比起來真的簡(jiǎn)單很多 ？呵，希望有興趣的朋友能和我留言交流交流。
歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明出處 http://www.cnblogs.com/hh54188
相關(guān)文章
這篇文章主要介紹了css中background-clip屬性的作用,background-clip屬性的通俗作用就是指定元素背景所在的區(qū)域,對(duì)css中background-clip屬性的相關(guān)知識(shí)感興趣的朋友一起看2018-03-29
CSS3基于背景裁剪（background-clip）實(shí)現(xiàn)的文本標(biāo)題透視特效源碼
這是一款CSS3基于背景裁剪（background-clip）實(shí)現(xiàn)的文本標(biāo)題透視特效源碼。畫面上的外星球與飛船背景中央呈現(xiàn)出帶有背景剪切透視的文本視覺效果。同時(shí)可響應(yīng)鼠標(biāo)的移動(dòng)呈2017-11-17CSS3中background-clip和background-origin的區(qū)別示例介紹
本文為大家介紹下CSS3中background-clip和background-origin的區(qū)別，感興趣的朋友可以參考下2014-03-10CSS3教程：background-clip和background-origin-CSS教程-網(wǎng)頁制作-網(wǎng)頁
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來2008-10-17詳解CSS3中的box-sizing（content-box與border-box）
這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關(guān)資料,需要的朋友可以參考下2019-04-19- 這篇文章主要介紹了淺談CSS3 box-sizing 屬性 有趣的盒模型 ,需要的朋友可以參考下2019-04-02
- 一說到CSS的盒模型(Box model)我想很多人都會(huì)比較煩，特別是對(duì)于新手，然而這個(gè)Box model又是我們CSS運(yùn)用中比較重要的一個(gè)屬性，box-sizing 屬性允許您以特定的方式定義匹2015-04-09
- 這篇文章主要介紹了CSS3屬性box-sizing使用指南,需要的朋友可以參考下2014-12-09
- CSS3 box-sizing屬性，在很多新手朋友來看是比較陌生的,接下來介紹CSS3 box-sizing使用及注意部分，感興趣的朋友可以了解下2013-01-08
解決CSS 中box-sizing與background-clip解決背景顯示范圍的問題
這篇文章主要介紹了CSS box-sizing與background-clip解決背景顯示范圍的問題，主要用這篇文章給大家做個(gè)記錄，避免大家遇到此類問題，感興趣的朋友跟隨小編一起看看吧2019-05-13
