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。