background-clip

介绍

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

使用示例

语法

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

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

取值

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

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

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

  • 默认值 border-box

注意事项

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

WARNING

此属性对 background-color 不生效

形式定义

初始值border-box
适用元素all elements
是否支持继承no
是否支持动画no

形式语法

<background-clip> = <box>

where

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

与 Web 的区别

  • 只支持关键字 border-boxpadding-boxcontent-box
    css 标准中还支持 inheritinitialunset

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。