困惑在哪里？

background-clip 與 background-origin是css3中引入的兩個(gè)跟元素背景相關(guān)的屬性，它們有相同的可選值，即border、padding、content三種，而且這兩個(gè)屬性表示的都是元素背景與元素邊框、補(bǔ)白(padding)和內(nèi)容區(qū)域之間的某種關(guān)系。

比如，我們想要在邊框上顯示背景，我們可以使用background-origin幫我們實(shí)現(xiàn)（前提是邊框要是透明的，不然它會(huì)覆蓋住背景）

這里為了既體現(xiàn)出邊框，又體現(xiàn)出邊框中的背景，我特意使用了虛線的邊框。(我是在chrome上做的demo,所以css3屬性只使用了webkit前綴)

運(yùn)行效果如下：

我們看到黑色部分是虛線的邊框（因?yàn)檫厡拰挾群艽?，所以虛線看起來怪怪的），虛的地方正好露出了背景。

所以使用background-origin能夠把背景顯示的邊框上。那background-clip又是做什么滴捏？

很多書上或文章上的解釋是background-clip是用來控制背景的顯示范圍的，那么是不是background-clip也可以讓背景顯示在邊框上呢？那就試試咯

還是用上面的代碼，不過這回是把里面的background-origin改為background-clip

然后看下運(yùn)行結(jié)果：

我們看到背景并沒有在邊框上顯示，看來background-clip并沒有這個(gè)功能。那這貨到底有什么用呢？

元芳，關(guān)于background-clip與background-origin這兩個(gè)東西，你怎么看？

大人，經(jīng)過明察暗訪，卑職已經(jīng)摸清了這二人的底細(xì)，容卑職慢慢道來。

首先來看background-clip, mozilla官網(wǎng)上的解釋是：

這解釋還是很讓人蛋疼，義譯過來大概就是規(guī)定背景圖片或顏色是否能在邊框下顯示。但前面已經(jīng)說了，把background-clip設(shè)為border是沒任何效果的。事實(shí)上，background-clip的默認(rèn)值就是border

其實(shí)background-clip的真正作用是決定背景在哪些區(qū)域顯示。如果它的值為border,則背景在元素的邊框、補(bǔ)白和內(nèi)容區(qū)域都會(huì)顯示；如果值為padding,則背景只會(huì)在補(bǔ)白和內(nèi)容區(qū)域顯示；如果值為content，則背景只會(huì)在內(nèi)容區(qū)域顯示。

那為毛前面的background-clip:border不起作用？這就得說說background-origin了

這回還是不看什么官網(wǎng)啊手冊啊什么的了，我直接說說我的理解。

background-origin是指背景顯示的區(qū)域，或者說背景是從哪個(gè)區(qū)域開始繪制的(邊框、補(bǔ)白或內(nèi)容區(qū)域)。

還不理解的話那就這么來說吧，background-position總該知道吧？它指定了背景的位置，比如background-position:0px 0px ；那這個(gè)0像素是指相對于哪里來說的呢？這就涉及到一個(gè)參照點(diǎn)的問題了。background-origin的作用就是指定background-position的參照點(diǎn)是在邊框區(qū)域的左上角，還是在補(bǔ)白區(qū)域的左上角，或是在內(nèi)容區(qū)域的左上角，對應(yīng)的三個(gè)值就分別是border、padding、content. background-position的也可以是left、right等方向詞語，這時(shí)候就不能說參照點(diǎn)了，而應(yīng)該說參照面，如果值為background-origin的值為border,則參照面包括邊框區(qū)域、補(bǔ)白區(qū)域、內(nèi)容區(qū)域三個(gè)部分，如果值為padding,則參照面只包括補(bǔ)白區(qū)域和內(nèi)容區(qū)域，如果值為content,則不用我講了吧。

這個(gè)時(shí)候再來看看前面那個(gè)問題就豁然開朗了，你把background-clip設(shè)為border,這時(shí)候邊框里是能顯示背景的，但問題是背景并不是從邊框的左上角開始繪制的，它是從補(bǔ)白區(qū)域才開始繪制的，女神背景壓根就沒想要搭理屌絲邊框，你屌絲擺出一個(gè)懷抱來迎接女神又有個(gè)屁用啊，趕緊細(xì)軟跑吧。background-origin的默認(rèn)值是padding,也就是默認(rèn)從補(bǔ)白區(qū)域開始繪制背景。

但屌絲終有逆襲日，木耳再無回粉時(shí)，當(dāng)變成黑木耳女神再來投懷送抱時(shí)，屌絲也完全可以說一聲：不！

所以當(dāng)background-origin的值為border，而background-clip的值為padding時(shí)，雖然背景是從邊框區(qū)域開始繪制的，但因?yàn)樵O(shè)定了邊框不顯示背景，所以本來屬于邊框的那一部分背景就不會(huì)顯示出來，就好像背景圖片被裁剪了一部分一樣?？聪麓a：

效果如下：

最后總結(jié)一下

background-clip：border|padding|content

該屬性指定了背景在哪些區(qū)域可以顯示，但與背景開始繪制的位置無關(guān)，背景的繪制的位置可以出現(xiàn)在不顯示背景的區(qū)域，這時(shí)就相當(dāng)于背景圖片被不顯示背景的區(qū)域裁剪了一部分一樣。

background-origin：padding|border|content

該屬性指定了背景從哪個(gè)區(qū)域(邊框、補(bǔ)白或內(nèi)容)開始繪制,但也僅僅能控制背景開始繪制的位置，你可以用這個(gè)屬性在邊框上繪制背景，但邊框上的背景顯不顯示出來那就要由background-clip來決定了

最新評論