#background-clip

#介绍

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

#使用示例

css-apisrc/background-clip/App.tsx

Code

预览

#语法

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

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

#取值

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

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

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

• border-area 背景被裁切到边框绘制的区域，该区域会考虑 border-width 的值。

• 默认值 border-box

#注意事项

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

#形式定义

#形式语法

<background-clip> = <box> | border-area

where

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

#与 Web 的区别

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

• border-area 只考虑 border-width 不考虑 border-style

#兼容性