css中的background屬性想必大家已經用了無數遍，但是對於css3屬性background-clip你可能還不太了解，那么今天我們就專門來聊聊這個屬性。 clip，英文意為 “裁切，修剪”，所以很顯然，background-clip屬性肯定與背景裁切有關，而事實也正是如此。 background-clip存在以下四個屬性值，他們分別是： border-box、padding-box、content-box 和 text
background-clip屬性值：
| 值 | 說明 |
| border-box | 默認值。背景繪制在邊框方框內（剪切成邊框方框） |
| padding-box | 背景繪制在襯距方框內（剪切成襯距方框） |
| content-box | 背景繪制在內容方框內（剪切成內容方框） |
| text | 給文本填充圖片背景 |
background-clip瀏覽器支持
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 屬性。注釋：Internet Explorer 8 以及更早的版本不支持 background-clip 屬性。
background-clip屬性講解
接下來我將通過具體實例來對background-clip這幾個屬性值一一進行講解。
border-box
.box{ background-clip: border-box;}border，意味着將邊框以外的背景部分裁掉，所以最終效果與圖一相同，也就是說，border-box是background-clip的默認屬性值。
padding-box
.box{ background-clip: padding-box;}padding，意味着將內邊距以外的背景部分裁掉
資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
content-box
.box{ background-clip: content-box;}content，意味着將內容以外的背景部分裁掉
text
.box{ -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(right,#0f0,#00f); -webkit-background-clip: text;}text，意味着將文字輪廓以外的背景部分裁掉而只留下文字輪廓以內的部分，而此時我們只需要通過設置文字為透明色即可透過文字看到盒子背景色
background-clip: text ，目前需要加上webkit前綴 。