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


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

  • 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区域)开始向内裁剪;
CSS background-clip属性


background-clip就是CSS背景界的葵花宝典,欲练神功,必先自宫。看哪里不爽,把它切下来就是了。
background-positionbackground-originbackground-attachmentbackground-repeatbackground-size只是作用background-image不同的是,background-clip作用的是background-colorbackground-image

原文链接

相关文章: