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

　　雖然兩者看上去實現的效果差不多，但是他們兩個的原理是不同的。background-origin定義的是背景位置（background-position）的起始點；而background-clip是對背景（圖片和背景色）的切割。

1.background-origin

　　我們來看一下例子：

　　我們來看一下style樣式：

.bg{width: 100px;height: 100px;padding:50px;border: 10px dashed #000000;background: #ffff00 url('pic1.gif') no-repeat;margin-top: 10px;display: inline-block;}.bg_origin_border{background-origin: border-box;/*background-position: 10px 10px;*/}.bg_origin_padding{background-origin: padding-box;/*background-position: 10px 10px;*/}.bg_origin_content{background-origin: content-box;/*background-position: 10px 10px;*/}

　　下面我們把注釋打開，來進一步驗證backgroung-origin。

?

2.backgroung-clip

　　我們還是直接來看例子：

　　樣式：

.bg_clip_border{background-clip: border-box;/*background-position: -10px -10px;*/}.bg_clip_content{background-clip: content-box;/*background-position: -10px -10px;*/}.bg_clip_padding{background-clip: padding-box;/*background-position: -10px -10px;*/}

　　我們接著把注釋去掉：

　　這就印證了background-clip只是將背景和背景色粗暴的裁剪。

?

轉載于:https://www.cnblogs.com/shytong/p/5077129.html

總結

以上是生活随笔為你收集整理的【CSS3】background-origin和background-clip的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。