欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入淺出CSS3 background-clip,background-origin和border-image教程

  發(fā)布時(shí)間：2011-01-27 12:14:49   作者：佚名   我要評(píng)論
最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔和說(shuō)明發(fā)現(xiàn)很多臆想中的效果都實(shí)現(xiàn)不了。
已兼容IE！之前不能兼容IE，給您的閱讀帶來(lái)不便十分抱歉，Sorry
一．這篇博客的初衷
　 最近在準(zhǔn)備一個(gè)下學(xué)期參加比賽的概念網(wǎng)站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但僅僅是依靠w3schools上的文檔和說(shuō)明發(fā)現(xiàn)很多臆想中的效果都實(shí)現(xiàn)不了。于是嘗試在百度中搜素，結(jié)果資料也是少的可憐，反復(fù)轉(zhuǎn)載的只有一篇來(lái)自懌飛博客的《 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ù)雜的背景和陰影效果。一方面是為了照顧一些入門(mén)web的朋友，另一方面也為了和后面這兩個(gè)技術(shù)的應(yīng)用做一個(gè)對(duì)比，做一個(gè)承上啟下的作用。熟練的朋友可以跳過(guò)這一節(jié)，直接從下一節(jié)開(kāi)始閱讀
　　1.請(qǐng)大家先看這樣一個(gè)效果：注意文字的背景，大家有沒(méi)有主意如何實(shí)現(xiàn)？一個(gè)最普通不過(guò)的想法是，我就按我需要的文字的長(zhǎng)度，用photoshop做一個(gè)包含左右半圓形狀的完整一體圖片。但問(wèn)題是，如果我文字的長(zhǎng)度需要更改，變得更長(zhǎng)或者更短時(shí)應(yīng)該怎么辦？為了不影響美觀，我們又不得不把圖片放回photoshop中返工？雖然不排除這是一種辦法。但要是有非常多的頁(yè)面和框背景需要用到這個(gè)圖片，那工作量會(huì)是非常巨大的。很明顯這是得不償失的。于是我們會(huì)想，手動(dòng)的讓圖片適應(yīng)文字麻煩，要是能讓圖片自動(dòng)能適應(yīng)文字，是絕對(duì)的事半功倍。那究竟有沒(méi)有這樣一種方法呢？
　　答案是肯定的(在這里我們簡(jiǎn)略的談一下關(guān)鍵思路，具體代碼的實(shí)現(xiàn)就不深究了)，為了實(shí)現(xiàn)這個(gè)效果，通常我們只需要三幅圖：和和。具體原理如圖所示：
　　相信看到圖之后有朋友應(yīng)該有不少已經(jīng)心領(lǐng)神會(huì)了：我們?cè)谠瓉?lái)唯一一個(gè)用來(lái)存放文字的div中，又插入了三個(gè) div:div#left,div#center,div#right。其中#left和#right分別用來(lái)存放半圓形的左右邊緣且固定寬度，而中間的#center用來(lái)存放文字，背景采用repeat-x定位，且不定位寬度，再通過(guò)其它c(diǎn)ss設(shè)置讓它能收縮緊貼內(nèi)容區(qū)域（content），這樣就能隨著文字的長(zhǎng)短而自如伸縮了。最后通過(guò)position或display屬性讓#lef，#center，#right實(shí)現(xiàn)無(wú)縫隙的拼接，同時(shí)讓最外層的 div#content也收縮緊貼它包裹的三個(gè)div，然后——大功告成。
這個(gè)技術(shù)的關(guān)鍵在于如何讓存放文字的div#center的伸縮引起外部整個(gè)div#content的的伸縮，且保持#left,#center和#right的布局不被破壞(要無(wú)縫才能讓人感覺(jué)一體，感覺(jué)真是)……當(dāng)然這不屬于我們今天的討論范圍，有興趣的朋友可以參考我之前的一篇《深入理解css盒子模型》。這樣就完成了自動(dòng)伸縮功能。精簡(jiǎn)的代碼如下：

復(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è)角下來(lái)。大家需要注意的重點(diǎn)是白色邊框的外邊緣的陰影效果（可能不是很明顯）——參照上面的例子，您覺(jué)得陰影效果是如何實(shí)現(xiàn)的？
　　對(duì)，還是用九個(gè)盒子拼成的(可能這里有朋友會(huì)想到滑動(dòng)門(mén)技術(shù)，的確這也是實(shí)現(xiàn)陰影的方法之一，但為了承上，這里暫且不介紹)，一個(gè)盒子裝的是中間的照片，另外八個(gè)盒子分別裝東，西，南，北，東南，西南，東北，西八個(gè)方向的陰影。這個(gè)不用畫(huà)圖，大家應(yīng)該可以想象出來(lái)吧。但這個(gè)例子又有不同——這一次有九個(gè)盒子，要是按上一個(gè)例子一樣，在一容中放九個(gè)盒子，再通過(guò)浮動(dòng)，定位屬性等來(lái)實(shí)現(xiàn)他們無(wú)縫拼接，也會(huì)是相當(dāng)繁瑣的一事。因?yàn)橐紤]每一個(gè)盒子周?chē)暮凶釉谧约荷炜s時(shí)也能適當(dāng)?shù)淖鲆恍┱{(diào)整，不至于出現(xiàn)錯(cuò)位和縫隙。所以的這次的做法是將放陰影的八個(gè)盒子用絕對(duì)定位固定在中間的盒子的八個(gè)方向上，這樣以中心盒子為中心，無(wú)論它怎么放大還是縮小，周?chē)藗€(gè)盒子都死死的附屬著它，就再也不用考慮自己周?chē)暮凶佑绣e(cuò)位之類(lèi)的問(wèn)題。圖例如下：
再看看實(shí)際的定位是不是這樣定位的呢，看看從firebug下的截圖：

再看看其中一個(gè)fancybox-bg-n的具體css:
三，background-clip,background-origin入門(mén)
 
我想說(shuō)的是，上面的兩個(gè)例子總結(jié)起來(lái)只有兩個(gè)字：麻煩。背景明明只關(guān)一個(gè)div的事，結(jié)果硬是要n多個(gè)不相關(guān)的div來(lái)輔助完成效果——background-clip,backgrou nd-origin便是我們的救星。要知道CSS3的任何新屬性不是W3C人吃飽了撐的沒(méi)事找事想出來(lái)來(lái)的，它的出現(xiàn)必然性必定是經(jīng)過(guò)詳細(xì)驗(yàn)證的且有它必要的價(jià)值。相信當(dāng)您閱讀完這一節(jié)的內(nèi)容后，你就會(huì)開(kāi)始學(xué)會(huì)如何用新技術(shù)擺脫那些陳舊繁瑣的步有三個(gè)屬性來(lái)就不復(fù)雜的效果了。
在開(kāi)始之前，先做幾點(diǎn)說(shuō)明，請(qǐng)看：

 
　　首先我們要引入幾個(gè)概念(呃，這是我自己翻譯的，不知道對(duì)不對(duì)，可能孤陋寡聞了，請(qǐng)朋友們見(jiàn)諒):內(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)的那條邊稱(chēng)為這個(gè)環(huán)形的邊緣(edge)。當(dāng)然因?yàn)閮?nèi)容區(qū)域是“實(shí)心”的，所以不存在內(nèi)外的問(wèn)題。  
　　origin的翻譯過(guò)來(lái)時(shí)原始的意思。顧名思義，所以background-origin是用來(lái)決定圖片的原始起始位置。它有三個(gè)可選值content-box,padding- box,border-box(background-origin如果寫(xiě)在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ū)域開(kāi)始顯示，還是內(nèi)邊距，還是邊框。
　　舉個(gè)例子，我們有一個(gè)div，關(guān)鍵在定位它的背景圖片，為了讓演示的效果更明顯，我們讓它從左上角開(kāi)始定位，position:left top并且no-repeat。并且內(nèi)容區(qū)于圖片大小一致，邊框和內(nèi)邊距都設(shè)置為30像素寬。OK,
在沒(méi)有加入background-origin之前的代碼為：

復(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ì)齊。以此類(lèi)推?？梢?jiàn)background-origin的值的確是決定背景圖片開(kāi)始從哪個(gè)區(qū)域開(kāi)始顯示。但話說(shuō)回來(lái)，如果我沒(méi)有設(shè)置任何的background-origin屬性的話，它默認(rèn)的起始位置在哪呢？這里就不演示了，但有必要記住——padding。
　　有一點(diǎn)要十分的注意：如果背景不是no-repeat的話，這個(gè)屬性是無(wú)效的。它會(huì)從border-box區(qū)域開(kāi)始顯示，這一點(diǎn)很重要。
　　background-origin屬性就先介紹到這里。應(yīng)該不難吧。下面繼續(xù)介紹background-clip。之所以沒(méi)有把這兩個(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ì)不可見(jiàn)。舉個(gè)具體例子，圖片起始位置和上面的例子一樣，比如是從border-box開(kāi)始，但我background-clip設(shè)置的值是content-box，在content之外，也就是border-box內(nèi)，padding-box內(nèi)的圖片內(nèi)容統(tǒng)統(tǒng)不可見(jiàn)。盡管你是讓圖片從邊框開(kāi)始顯示。實(shí)例如下

復(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;
}


　　正如以上所說(shuō)，我們可以看見(jiàn)雖然圖片是從頂著邊框的左上角進(jìn)行定位，但是裁剪屬性background-clip的屬性是設(shè)置為content-box,所以只有content區(qū)域的內(nèi)容看得見(jiàn)，也就是只要是在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，但卻沒(méi)有圖片的任何部位被屏蔽。我想說(shuō)的是：在火狐下-moz-background-clip屬性是沒(méi)有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版)。可以自行測(cè)試

四．實(shí)戰(zhàn)

　　在學(xué)習(xí)了基本background-clip和background-origin用法和原理之后，我們將通過(guò)操作一個(gè)實(shí)際的例子，來(lái)加深我們的學(xué)習(xí)：

　　　　　　　　　　　　　　　　　　

這個(gè)圓角背景是由三部分組成：和和(呃，其實(shí)是從Webqq2.0網(wǎng)站上撬下來(lái)的，就是上面的工具條……但是作為教學(xué)用，應(yīng)該無(wú)傷大雅吧……)，思路和開(kāi)篇的那個(gè)黑背景制作過(guò)程是一樣的，左右固定，中間窄的repeat-x。但是這會(huì)不用插入三個(gè)div，又要設(shè)置float,又要設(shè)置display考慮布局那么麻煩。

步驟一：

先搭建一個(gè)框架出來(lái)，給一個(gè)布局。不著急把圖片插入進(jìn)去。主意看以下代碼，有幾點(diǎn)需要說(shuō)明的：因?yàn)閮H需在盒子左右兩側(cè)插入背景，且恰好為左右要插入圖片的寬度(如果不恰好為那么寬呢？那么不會(huì)成功的，因?yàn)閏ss3中還沒(méi)有屬性能控制圖片在邊框中的定位，你會(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也是可以不需要的，為了方便說(shuō)明一些問(wèn)題，還是保留*/
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也是可以不需要的，為了方便說(shuō)明一些問(wèn)題，還是保留*/
margin:0 auto;
}

 

步驟三：

這步也很簡(jiǎn)單，就是把中間重復(fù)的背景的左右兩端去掉，為了方便我們下一步在左右邊框中插入需要的圖片。注意這里的

 -moz-background-origin的content屬性是無(wú)效的，實(shí)際上這里的值是padding。正如在上一節(jié)的最后說(shuō)道，在火狐中是沒(méi)有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沒(méi)有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也是可以不需要的，為了方便說(shuō)明一些問(wèn)題，還是保留*/
margin:0 auto;
}

 
步驟四：
這一步還是很簡(jiǎn)單，插入邊框的左右兩張圖片，并設(shè)置好position，repeat，clip等值。注意當(dāng)存在多個(gè)圖片時(shí)，設(shè)置值的格式，用逗號(hào)隔開(kāi)。

復(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也是可以不需要的，為了方便說(shuō)明一些問(wèn)題，還是保留*/
margin:0 auto;
}

重要提示！寫(xiě)到這一步，可以從上圖看到已經(jīng)快大功告成了。把左右的紅色邊框去掉就可以了——那么把 border-color改為none或是直接去掉這句話？不行的。如果不設(shè)置顏色的話邊框就會(huì)變成黑色，因?yàn)檫吙蛴袠邮剑覙邮竭€有11px寬啊，所以會(huì)用默認(rèn)的黑色來(lái)填充。現(xiàn)在你可能又會(huì)覺(jué)得是邊框樣式border-style的問(wèn)題，那咱們把樣式去掉，把寬度保留？也不行，因?yàn)槿绻麤](méi)有樣式寬度是無(wú)效的，結(jié)果會(huì)如下圖(我們可以從firebug中看到邊框的寬度是0，雖然仍然保留border-width)。所以border- style,border-color,border-width缺一不可！這一點(diǎn)要十分注意！

 

步驟五：

綜上所述，你可能會(huì)覺(jué)得既不能改border-style又不能改border-color豈不是沒(méi)轍了？正確答案是——還是修改border-color，別忘了，color還有一個(gè)值transparent，透明。顏色還讓它在，但只要人們看不見(jiàn)就行了。我們實(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
　 寫(xiě)到這里我發(fā)現(xiàn)文章的戰(zhàn)線貌似拉的有點(diǎn)長(zhǎng)了。所以我打算border-image在這里只是作為附加內(nèi)容說(shuō)明，并不會(huì)深究，盡可能簡(jiǎn)扼一些。開(kāi)始（所以廢話也簡(jiǎn)扼一些……）：
　　border-image是定位在邊框上的圖片——那不是和把background-origin屬性設(shè)為border差不多一個(gè)意思？是的，的確有這層含義。但在接下來(lái)的說(shuō)明和例子中，你將看到它的便利之處。
　　這個(gè)屬性說(shuō)到底還是在搗鼓一張圖片。先直接看一張說(shuō)明圖片：
　　　　　　
　　草圖左邊是舉例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è)疑問(wèn)。如果實(shí)際圖片真如左邊草圖那么小，而實(shí)際盒子真有右邊草圖的那么大，那2、6、8、4區(qū)域的圖片可能就不夠用呀？問(wèn)得好，所以border-image還提供一種機(jī)制來(lái)處理這個(gè)問(wèn)題——圖片重復(fù)屬性(border-image- repeat)，也叫拉伸值(stretch value)。有四個(gè)值可以選擇：stretch(拉伸且默認(rèn))、repeat（重復(fù)）、round（平鋪）。是不是聽(tīng)著很耳熟，對(duì)，和電腦壁紙的位置屬性是一樣的。對(duì)每一張border-image最多可以設(shè)置兩個(gè)拉伸屬性如round round。前一個(gè)針對(duì)圖片側(cè)邊(除5區(qū)域以外)，后一個(gè)針對(duì)中間部分，即5區(qū)域。如果只有一個(gè)值的話，則認(rèn)為所以區(qū)域都按照此值布置。若無(wú)設(shè)置此屬性，則按默認(rèn)值拉伸(stretch)來(lái)布置image。
所以對(duì)應(yīng)上圖，咱們?cè)賮?lái)一個(gè)例子，就一目了然了：
　　回到上節(jié)的那個(gè)例子，這回我們只需要兩張圖片：和
　　可以看出后面那種圖就是左右兩側(cè)拼接而成的，這回咱們用border-image屬性完成上面的同樣效果，很簡(jiǎn)單，直接看CSS代碼：

復(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也是可以不需要的，為了方便說(shuō)明一些問(wèn)題，還是保留*/
margin:0 auto;
}

還是要做幾點(diǎn)說(shuō)明。因?yàn)樵谶@個(gè)例子中我們只需要左右側(cè)有圖片，所以切割屬性只要將圖片左右切割開(kāi)去可以了：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)單，這里就給大家賣(mài)個(gè)關(guān)子吧。當(dāng)做思考題咯
 五．再?lài)Z叨幾句
　　 如果大家在閱讀過(guò)程中有什么疑惑，或發(fā)現(xiàn)什么錯(cuò)誤，甚者是錯(cuò)別字，都可以留言給我。我將盡快給大家回復(fù)，修正。很樂(lè)意與大家交流。 
　　一直覺(jué)得博客園永遠(yuǎn)是.net，c#，MVC之類(lèi)的后臺(tái)天下。有關(guān)web前端的文章不少，但含金量遠(yuǎn)遠(yuǎn)不如那些多。雖然我學(xué)的是.net方向，但前端始終是摯愛(ài)。因?yàn)椴┛蛨@這里前端的資料的匱乏。所以自己一旦遇到了很多前端的問(wèn)題都只能google國(guó)外的文章，或是去stack overflow（但真的很有效果，回復(fù)的速度快，集思廣益，而且句句錙銖。不像國(guó)內(nèi)全都是“頂”啊，“標(biāo)記”之類(lèi)的廢話，向大家強(qiáng)烈推薦）。
　　前端的冷落是不是真的因?yàn)榍岸耸情_(kāi)源，比如html代碼，只要把想要網(wǎng)站的圖片和樣式copy一下改一改就是了。毫無(wú)技術(shù)可言？還是JavaScript和jQuery這種東西和C#、Java比起來(lái)真的簡(jiǎn)單很多 ？呵，希望有興趣的朋友能和我留言交流交流。
　　歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明出處 http://www.cnblogs.com/hh54188

相關(guān)文章

最新評(píng)論