困惑在哪里？

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

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

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

運行效果如下：

我們看到黑色部分是虛線的邊框（因為邊寬寬度很大，所以虛線看起來怪怪的），虛的地方正好露出了背景。

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

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

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

然后看下運行結果：

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

元芳，關于background-clip與background-origin這兩個東西，你怎么看？

大人，經過明察暗訪，卑職已經摸清了這二人的底細，容卑職慢慢道來。

首先來看background-clip, mozilla官網上的解釋是：

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

其實background-clip的真正作用是決定背景在哪些區域顯示。如果它的值為border,則背景在元素的邊框、補白和內容區域都會顯示；如果值為padding,則背景只會在補白和內容區域顯示；如果值為content，則背景只會在內容區域顯示。

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

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

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

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

這個時候再來看看前面那個問題就豁然開朗了，你把background-clip設為border,這時候邊框里是能顯示背景的，但問題是背景并不是從邊框的左上角開始繪制的，它是從補白區域才開始繪制的，女神背景壓根就沒想要搭理