background-clip

介绍

background-clip设置元素的背景(目前只支持背景图片)是否延伸到边框(border)、内边距盒子(padding-box)、内容盒子(content-box)下面。
如果没有设置(background-image)，那么这个属性只有在边框(border)被设置为非实心(solid)、透明或半透明时才能看到视觉效果，否则，本属性产生的样式变化会被边框覆盖。

取值

• border-box
  背景延伸至边框外沿(但是在边框下层)。

• padding-box
  背景延伸至内边距(padding)外沿。不会绘制到边框处。

• content-box 背景被裁剪至内容区(content box)外沿。

• 默认值 border-box

样例：

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

// 指定多个clip
background-clip: border-box, content-box, padding-box;

标准化语法

<background-clip> = <box>

where

<box> = border-box | padding-box | content-box

与 Web 的区别

• 只支持关键字border-box、padding-box、content-box
  css 标准中还支持inherit、initial和unset

注意事项

当指定多个background-clip时，如果指定的 clip 的数量比background-image的数量少时。第一个 clip 的值会作用在剩下的background-image上。

注意

此属性对background-color不生效