欧美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ù)雜的背景和陰影效果。一方面是為了照顧一些入門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)門技術(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è)盒子周圍的盒子在自己伸縮時(shí)也能適當(dāng)?shù)淖鲆恍┱{(diào)整,不至于出現(xiàn)錯(cuò)位和縫隙。所以的這次的做法是將放陰影的八個(gè)盒子用絕對(duì)定位固定在中間的盒子的八個(gè)方向上,這樣以中心盒子為中心,無(wú)論它怎么放大還是縮小,周圍八個(gè)盒子都死死的附屬著它,就再也不用考慮自己周圍的盒子有錯(cuò)位之類的問(wèn)題。圖例如下:
再看看實(shí)際的定位是不是這樣定位的呢,看看從firebug下的截圖:

再看看其中一個(gè)fancybox-bg-n的具體css:
,background-clip,background-origin入門
 
我想說(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)的那條邊稱為這個(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ì)齊。以此類推??梢?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ù)牟眉簦赃m應(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,Google7.0.517.24, Opera/9.80, Safari5.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版)??梢宰孕袦y(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)填充?,F(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)單,這里就給大家賣個(gè)關(guān)子吧。當(dāng)做思考題咯
 五.再嘮叨幾句
   如果大家在閱讀過(guò)程中有什么疑惑,或發(fā)現(xiàn)什么錯(cuò)誤,甚者是錯(cuò)別字,都可以留言給我。我將盡快給大家回復(fù),修正。很樂(lè)意與大家交流。 
  一直覺(jué)得博客園永遠(yuǎn)是.net,c#,MVC之類的后臺(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)記”之類的廢話,向大家強(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)論