CSS background-clip 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-clip是 CSS 中用于控制背景绘制区域的属性，它决定了背景（颜色或图片）应该延伸到元素的哪个区域。

background-clip常用于创建特殊视觉效果，如文字填充效果或控制背景在边框下的显示方式。

默认值：	border-box
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.backgroundClip="content-box"

常用的实例

接下来通过多个实例演示background-clip属性的用法，来深化您对background-clip属性的理解。

实例代码运行代码

复制

/* 默认值 - 背景延伸到边框 */
.example1 {
    background-clip: border-box;
    border: 10px dotted rgba(0,0,0,0.5);
    padding: 20px;
}

/* 背景只延伸到内边距 */
.example2 {
    background-clip: padding-box;
    border: 10px dotted rgba(0,0,0,0.5);
    padding: 20px;
}

/* 背景只在内容区显示 */
.example3 {
    background-clip: content-box;
    border: 10px dotted rgba(0,0,0,0.5);
    padding: 20px;
}

/* 文字填充背景效果 */
.example4 {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, red, blue);
}

CSS 语法

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

属性值

值	描述
`border-box`	默认，背景延伸到边框外边缘（在边框下层绘制）。
`padding-box`	背景延伸到内边距（`padding`）外边缘，边框下不绘制背景。
`content-box`	背景仅在内容区域绘制，内边距区域不绘制。
`text`	背景被裁剪为文字的前景色（需要配合`-webkit-text-fill-color: transparent`使用）。