1.作用：CSS3中的Background-clip屬性，其主要是用來確定背景的裁剪區域，換句話說，就是如何控制元素背景顯示區域

2.語法：background-clip ： border-box || padding-box || content-box

3.取值說明：

1.border-box:此值為默認值，背景從border區域向外裁剪，也就是超出部分將被裁剪掉

2.padding-box：背景從padding區域向外裁剪，超過padding區域的背景將被裁剪掉

3.context-box：背景從content區域向外裁剪，超過context區域的背景將被裁剪掉

不知道大家沒有深入的去了解Box Model中background部分，background在Box Model中，他是布滿整個元素的Box區域的，并不是從padding內部開始，只不過邊框部分遮住了部分background，但有一點需要注意，background-color是從元素的邊框左上角起到右下角止，而background-image卻不一樣，他是從padding邊緣的左上角起而到border的右下角邊緣止，如果大家對上面那句話不太好理解的話，我們一起來看一個簡單的Box Model加上邊框和背景色，背景圖片的示意圖

注：但如何能讓他們在統一的位置顯示呢？那就是今天所要介紹的background-clip，這個屬性就會讓背景色和背景圖片統一在相同的位置，前面也簡單說過，background-clip會根據不同的屬性值進行裁剪多了的背景部分

4.實例：

DEMO1：background-clip:border-box

首先在前面的demo基礎上，給div.demo加上一個class名“borderBox”,然后在這個Demo上加上background-box:border-box的屬性

從效果圖中可以看出，background-clip取值為border-box時，跟沒有設置background-clip效果是完全一樣的，那是因為background-clip的默認值為border-box

DEMO2：background-clip:padding-box

此時效果就與原來默認下有明顯的區別了，圖上可以得知，只要超過padding邊緣的背景都被裁剪掉了，此時的裁剪并不是讓背景成比例裁剪，而是直接將超過padding邊緣的背景剪切掉

DEMO3:background-clip:content-box

明顯背景只在內容區域顯示，超過內容邊緣的背景直接被裁剪掉了

5.給文本填充圖片背景、

就是background-clip:text配合其私有屬性-webkit-text-fill-color: transparent

總結

以上是生活随笔為你收集整理的CSS之Background-clip属性的全部內容，希望文章能夠幫你解決所遇到的問題。

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