CSS中的background屬性想必大家已經(jīng)用了無(wú)數(shù)遍，但是對(duì)于CSS3屬性background-clip你可能還不太了解，那么今天我們就專門來(lái)聊聊這個(gè)屬性。

clip，英文意為 “裁切，修剪”，所以很顯然，background-clip屬性肯定與背景裁切有關(guān)，而事實(shí)也正是如此。

background-clip存在以下四個(gè)屬性值，他們分別是：

border-box、padding-box、content-box 和 text

接下來(lái)我將通過(guò)具體實(shí)例來(lái)對(duì)background-clip這幾個(gè)屬性值一一進(jìn)行講解。

1. 不設(shè)置 background-clip 屬性

/*CSS*/
.box{ display: inline-block; width: 200px; height: 200px; margin: 20px; padding: 20px; border: 10px dashed #000; background-color: #ff0;}

<!--HTML-->
<div class="box">想要學(xué)習(xí)更多前端知識(shí)，歡迎關(guān)注微信公眾號(hào)：前端微站</div>

顯示效果：

圖一

2. border-box

/*CSS*/
.box1{ background-clip: border-box;}

<!--HTML-->
<div class="box box1">想要學(xué)習(xí)更多前端知識(shí)，歡迎關(guān)注微信公眾號(hào)：前端微站</div>

border，意味著將邊框以外的背景部分裁掉，所以最終效果與圖一相同，也就是說(shuō)，border-box是background-clip的默認(rèn)屬性值。

3. padding-box

/*CSS*/
.box2{ background-clip: padding-box;}

<!--HTML-->
<div class="box box2">想要學(xué)習(xí)更多前端知識(shí)，歡迎關(guān)注微信公眾號(hào)：前端微站</div>

padding，意味著將內(nèi)邊距以外的背景部分裁掉，所以最終效果如圖二所示：

圖二

4. content-box

/*CSS*/
.box3{ background-clip: content-box;}

<!--HTML-->
<div class="box box3">想要學(xué)習(xí)更多前端知識(shí)，歡迎關(guān)注微信公眾號(hào)：前端微站</div>

content，意味著將內(nèi)容以外的背景部分裁掉，所以最終效果如圖三所示：

圖三

5. text

/*CSS*/
.box4{ color: transparent; background: -webkit-linear-gradient(right,#0f0,#00f); -webkit-background-clip: text;}

<!--HTML-->
<div class="box box4">想要學(xué)習(xí)更多前端知識(shí)，歡迎關(guān)注微信公眾號(hào)：前端微站</div>

text，意味著將文字輪廓以外的背景部分裁掉而只留下文字輪廓以內(nèi)的部分，而此時(shí)我們只需要通過(guò)設(shè)置文字為透明色即可透過(guò)文字看到盒子背景色，所以最終效果如圖四所示：

圖四

兼容性：

background-clip: text ，目前需要加上webkit前綴

本文重點(diǎn)總結(jié)

① background-clip 用于背景裁切，有 border-box、padding-box、content-box 和 text 四個(gè)屬性值
② border-box 裁掉邊框以外的背景部分，為默認(rèn)值
③ padding-box 裁掉內(nèi)邊距以外的背景部分
④ content-box 裁掉內(nèi)容以外的背景部分
⑤ text 裁掉文字輪廓以外的背景部分，目前需加webkit前綴