CSS background-clip属性

Clip有“裁剪”的意思，，放到CSS的background中就是裁剪背景。当你看上一套西服，你非常喜欢，于是你一咬牙买了下来，却发现它并不合你的身，穿在你瘦小的身材上它显得有些肥大，这时你就需要裁剪。裁剪西服的工具是剪刀。转换场景，如果你发现背景不合适，裁剪的工具是什么呢？没错，就是这个background-clip。background-clip是CSS3的新属性。它就是一把剪刀，哪里不爽剪哪里。

---

那么你可以不爽的地方可以分三类：

• border-box（默认值）
• padding-box
• content-box

这是background-clip可以裁剪的区域。在这里裁剪的意思是裁剪的起点，背景会保留裁剪的区域。

比如：
background-clip：border-box;表示从border-box区域（包括border-box区域）开始向内裁剪；
background-clip：padding-box;表示从padding-box区域（包括padding-box区域）开始向内裁剪；
background-clip：content-box;表示从content-box区域（包括content-box区域）开始向内裁剪；

---

background-clip就是CSS背景界的葵花宝典，欲练神功，必先自宫。看哪里不爽，把它切下来就是了。
和background-position、background-origin、background-attachment、background-repeat、background-size只是作用background-image不同的是，background-clip作用的是background-color和background-image。

原文链接