正如以上所說，我們可以看見雖然圖片是從頂著邊框的左上角進行定位，但是裁剪屬性background-clip的屬性是設置為content-box,所以只有content區(qū)域的內容看得見，也就是只要是在content之外的圖片內容都被隱蔽掉了。

　　我之所以要在不同瀏覽器下進行測試( Firefox/3.6.3，Google：7.0.517.24， Opera/9.80, Safari：5.0.1)，答案也在圖上，我們看到在火狐下的結果和其他瀏覽器結果竟然不一樣。明明background-clip設置的屬性是content-box，但卻沒有圖片的任何部位被屏蔽。我想說的是：在火狐下-moz-background-clip屬性是沒有content這一值的(但是padding和border還是有的)，在firebug中可以看到，-moz-background-clip的值直接是border，當你強行改為content時，這條屬性會直接從bug中消失。當然這只是在 3.6.3版本下的結果，至于在4.0版本中表現(xiàn)如何(雖然只是beta版)?？梢宰孕袦y試

四．實戰(zhàn)

　　在學習了基本background-clip和background-origin用法和原理之后，我們將通過操作一個實際的例子，來加深我們的學習：

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

步驟一：

先搭建一個框架出來，給一個布局。不著急把圖片插入進去。主意看以下代碼，有幾點需要說明的：因為僅需在盒子左右兩側插入背景，且恰好為左右要插入圖片的寬度(如果不恰好為那么寬呢？那么不會成功的，因為css3中還沒有屬性能控制圖片在邊框中的定位，你會想不是有background- position屬性嗎？要注意那個是控制圖片在整個盒子中的定位。還是不信的話你可以親自試試)；還有就是padding的值也是可以不用設置的，是為了與上面的例子盡力保持一致，方便大家對比學習 margin也是為了讓盒子居中而已，可以忽略；最后border-style和border-color也是方便大家理解布局才添加上去的。

步驟二：

這一步很簡單，就是把中間需要x軸重復的圖片添加上去，并且把黑色背景去掉

步驟三：

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

 -moz-background-origin的content屬性是無效的，實際上這里的值是padding。正如在上一節(jié)的最后說道，在火狐中是沒有content這個屬性的。如果有朋友想要copy這段代碼，記得根據瀏覽器版本做相應的修改，把origin的值content改為 padding，或者把盒子的padding去掉。

這一步還是很簡單，插入邊框的左右兩張圖片，并設置好position，repeat，clip等值。注意當存在多個圖片時，設置值的格式，用逗號隔開。

復制代碼

代碼如下:

.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; /*為了要適應左右兩個圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
border-style:dashed;
border-color:Red;
width:180px;
height:90px; /*因為要適應圖片，所以寬度改小一點*/
padding:30px; /*其實Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}

重要提示！寫到這一步，可以從上圖看到已經快大功告成了。把左右的紅色邊框去掉就可以了——那么把 border-color改為none或是直接去掉這句話？不行的。如果不設置顏色的話邊框就會變成黑色，因為邊框有樣式，而且樣式還有11px寬啊，所以會用默認的黑色來填充。現(xiàn)在你可能又會覺得是邊框樣式border-style的問題，那咱們把樣式去掉，把寬度保留？也不行，因為如果沒有樣式寬度是無效的，結果會如下圖(我們可以從firebug中看到邊框的寬度是0，雖然仍然保留border-width)。所以border- style,border-color,border-width缺一不可！這一點要十分注意！

 

步驟五：

綜上所述，你可能會覺得既不能改border-style又不能改border-color豈不是沒轍了？正確答案是——還是修改border-color，別忘了，color還有一個值transparent，透明。顏色還讓它在，但只要人們看不見就行了。我們實現(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;
}

OK，徹底大功告成，很簡單不是嗎。

 四．border-image

　 寫到這里我發(fā)現(xiàn)文章的戰(zhàn)線貌似拉的有點長了。所以我打算border-image在這里只是作為附加內容說明，并不會深究，盡可能簡扼一些。開始（所以廢話也簡扼一些……）：

　　border-image是定位在邊框上的圖片——那不是和把background-origin屬性設為border差不多一個意思？是的，的確有這層含義。但在接下來的說明和例子中，你將看到它的便利之處。

　　這個屬性說到底還是在搗鼓一張圖片。先直接看一張說明圖片：

　　　　　　

　　草圖左邊是舉例border-image所使用的圖片，右邊的草圖是比喻一個盒子。border- image有兩個值需要設定，頭一個是切割屬性(border-image-slice)，最多有四個值可以設置，命名規(guī)則和margin、 padding都是一致的，順序上右下左。四個值對應左邊草圖的不同區(qū)域的寬度，同樣上右下左的順序，也就是2，6，8，4區(qū)域的寬度（4、6區(qū)域為橫向長度，2，8區(qū)域為叢向長度）。從圖中可知，因為是交集的緣故，只要定義好這四塊的寬度，1、3、9、7區(qū)域的長寬也就隨之確定。在映射到盒子模型上，從 1到9（除5）正好連成盒子的邊框區(qū)域，這樣盒子的邊框圖片就有著落了。

　　但還有一個疑問。如果實際圖片真如左邊草圖那么小，而實際盒子真有右邊草圖的那么大，那2、6、8、4區(qū)域的圖片可能就不夠用呀？問得好，所以border-image還提供一種機制來處理這個問題——圖片重復屬性(border-image- repeat)，也叫拉伸值(stretch value)。有四個值可以選擇：stretch(拉伸且默認)、repeat（重復）、round（平鋪）。是不是聽著很耳熟，對，和電腦壁紙的位置屬性是一樣的。對每一張border-image最多可以設置兩個拉伸屬性如round round。前一個針對圖片側邊(除5區(qū)域以外)，后一個針對中間部分，即5區(qū)域。如果只有一個值的話，則認為所以區(qū)域都按照此值布置。若無設置此屬性，則按默認值拉伸(stretch)來布置image。

所以對應上圖，咱們再來一個例子，就一目了然了：

　　回到上節(jié)的那個例子，這回我們只需要兩張圖片：和

　　可以看出后面那種圖就是左右兩側拼接而成的，這回咱們用border-image屬性完成上面的同樣效果，很簡單，直接看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; /*為了要適應左右兩個圖片的寬度，且只有左右需要，上下的寬度就不需要了*/
width:180px;
height:90px; /*因為要適應圖片，所以寬度改小一點*/
padding:0 30px; /*其實Padding也是可以不需要的，為了方便說明一些問題，還是保留*/
margin:0 auto;
}

還是要做幾點說明。因為在這個例子中我們只需要左右側有圖片，所以切割屬性只要將圖片左右切割開去可以了：0 11。在上一節(jié)最后一步的重要提示中，我反復強調border-style,border-color,border-width缺一不可。但在這里只需要一個border-width就足夠了！這就是它的便利之處。但在使用時要記得不同瀏覽器之間的差異，判斷是否要使用-moz-或-webkit-或 -o-前綴。

 

再給大家看幾個驚艷的例子：

----->

還有小的：------->

至于具體CSS代碼嘛，其實很簡單，這里就給大家賣個關子吧。當做思考題咯

 五．再嘮叨幾句

　　 如果大家在閱讀過程中有什么疑惑，或發(fā)現(xiàn)什么錯誤，甚者是錯別字，都可以留言給我。我將盡快給大家回復，修正。很樂意與大家交流。 

　　一直覺得博客園永遠是.net，c#，MVC之類的后臺天下。有關web前端的文章不少，但含金量遠遠不如那些多。雖然我學的是.net方向，但前端始終是摯愛。因為博客園這里前端的資料的匱乏。所以自己一旦遇到了很多前端的問題都只能google國外的文章，或是去stack overflow（但真的很有效果，回復的速度快，集思廣益，而且句句錙銖。不像國內全都是“頂”啊，“標記”之類的廢話，向大家強烈推薦）。

　　前端的冷落是不是真的因為前端是開源，比如html代碼，只要把想要網站的圖片和樣式copy一下改一改就是了。毫無技術可言？還是JavaScript和jQuery這種東西和C#、Java比起來真的簡單很多 ？呵，希望有興趣的朋友能和我留言交流交流。

　　歡迎轉載，轉載請注明出處 http://www.cnblogs.com/hh54188