background-clip

用来将背景(包括背景图片和背景颜色)做适当的裁剪以适应实际需要。
在开始之前先说一下一个经常被忽略的事实:border是有背景颜色的!!!只是一般我们都会设置border为solid再加上背景颜色,就覆盖了来自于盒子的背景颜色。
可能的值有:

  1. border-box 不裁剪(默认值)
  2. padding-box 从padding开始裁剪,border上没有来自盒子的背景颜色和背景图片了。
  3. content-box 从内容区域开始裁剪。

该属性只负责剪裁,和背景图片和背景颜色的位置无关,被剪掉的地方的背景为透明(transparent)###

说到这个属性,又一个有点类似的属性叫overflow,当overflow的值为hidden时,他的执行方式类似于padding-box。将padding之外的内容都剪掉(或者说隐藏掉)。

你可能感兴趣的:(background-clip)