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






<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盒子模型》。





.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;
}

.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版)??梢宰孕袦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也是方便大家理解布局才添加上去的。
.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ù)的圖片添加上去,并且把黑色背景去掉
.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去掉。
.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;
}


.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)它:
.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;
}







.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;
}




相關(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)題透視特效源碼。畫(huà)面上的外星球與飛船背景中央呈現(xiàn)出帶有背景剪切透視的文本視覺(jué)效果。同時(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)頁(yè)制作-網(wǎng)頁(yè)
原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性,用來(lái)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
- 一說(shuō)到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屬性,在很多新手朋友來(lái)看是比較陌生的,接下來(lái)介紹CSS3 box-sizing使用及注意部分,感興趣的朋友可以了解下2013-01-08
解決CSS 中box-sizing與background-clip解決背景顯示范圍的問(wèn)題
這篇文章主要介紹了CSS box-sizing與background-clip解決背景顯示范圍的問(wèn)題,主要用這篇文章給大家做個(gè)記錄,避免大家遇到此類問(wèn)題,感興趣的朋友跟隨小編一起看看吧2019-05-13