background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來決定背景的定位。
background-clip 用來判斷 background 是否包含 border 區域。而 background-origin 用來決定 background-position 計算的參考位置。
語法為：
background-clip: [border | padding] [, [border | padding]]* |
對於background-clip：
如果是padding 值，則background 忽略padding邊緣，border 是透明的。如果是border 值，則background 包含border 區域。如果background-image 圖片有多個，對應的background-clip 值之間用逗號分隔。
對於background-origin：
如果是padding 值，則position 相對於padding 邊緣（”0 0″ 為padding 邊緣的左上角，而「100% 100%」 為右下角）。如果是border 值，則表示相對border 邊緣。而border 值則相對於內容邊緣。與background-clip 相同，多個值也用逗號分隔。如果background-clip 是padding 值，background-origin 是border 值，且background-position 是「top left」（預設初始值），則背景圖左上角將會被截取掉部分。
這兩個屬性只從CSS3 才出現，在未使用該屬性background module 中的預設表現又如何呢？
| background-clip 預設類似於background-clip:border。 background-origin 預設類似background-origin:padding。 |
但IE 又是特例（It sucks）。
在IE6 、IE7 中，一般元素（button 等除外）的背景相當於：background-clip:border; background-origin:border;
而hasLayout 的元素（加上button 等）的背景則相當於：background-clip:padding; background-origin:padding;
這一對CSS3 屬性已在Mozilla, Safari 3 和Konqueror 等瀏覽器中實現，不過都是透過其私有屬性的表達方式。
基本非IE 的瀏覽器的私有屬性通常會以-xxx- 這樣開始，-o-就是以Presto 為引擎的Opera 私有的、-icab- 是iCab 私有的，-khtml- 是以KHTML 為引擎的瀏覽器（如Konqueror Safari）、-moz- 就是以Mozilla 的Gecko 為引擎的瀏覽器（如Firefox，Mozilla）、-webkit- 就是以Webkit 渲染引擎（是KHTML 的衍生產品）的瀏覽器（如Safari、Swift） 。
即支援的私有屬性分別為：
| -moz-background-clip -webkit-background-clip -khtml-background-clip -moz-background-origin -webkit-background-origin -khtml-background-origin |
以下舉個運用background-origin 屬性的簡單例子，效果如下圖：
HTML程式碼：
CSS程式碼：
button { border:3px double #95071b;/*用3px 雙邊來模擬設計圖中的白線*/ background-color:#95071b; /*設定背景裁切方式與參考線*/ -moz-background-origin:padding; /*向前相容*/ color:#fff; /*修正IE6下高度問題*/ |
不足之處：此效果在Opera 下無法實現。當然這只是一種對HTML 程式碼有潔癖的解決方法（限於對background-clip 和background-origin 屬性的學習和理解），當然也可嘗試其他方法，也許會使CSS 更簡潔，至於各種方法的優缺點由您自己衡量。