「css」background-clip-背景的延伸

作用

设置元素的背景（背景图片或颜色）是否延伸到边框下面

语法

/* Keyword values */
/* default */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

用法

渐变or图片背景的文字

• background-clip: text;属性需其他属性配合才能看出效果，该属性可用于渐变字的效果：

background-clip: text;
-webkit-background-clip: text; // 兼容
color: transparent;

• 在此基础上，如果使用background-image属性，那么就可以做出背景图片的透字的感觉，举例如下：

透明边框

• 因为background-clip的属性默认为border-box，所以如果不修改这个属性为content-box或者padding-box，我们无法直接通过border-color: transparent;绘制出一个透明的边框。