如何设置让背景颜色不包括 padding 部分，顺带全面学习 background-clip 属性（可以实现文字渐变）

先解决需求

实现背景颜色不包括 padding 部分，直接给容器添加 css 属性：background-clip:content-box;
示例代码：

.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;
}

学习背景

我主要是在布局网页的时候使用 flex 布局，对三列子元素设置 flex：1 进行平分，但是如果给其中两个子元素加上 margin-right 的话就会发现子元素会连同 margin-right 的值一起撑开，实际内容（不包括 margin 的部分）并不会三等分宽度。

所以我就想着使用 padding 来代替 margin，因为默认情况下 padding 会计入元素的总宽度和高度计算中，而 margin 并不会。父元素的背景会作用在子元素的 margin 区域，所以就想着如果背景不包括 padding 部分，那么就可以解决这个问题。

接下来我们系统学习一下 background-clip 属性。

ps：其实这个三等分效果也可以使用 grid 布局结合 gap 来实现，更加方便，但是 grid 布局浏览器支持性没有 flex 广，兼容性不如 flex，而且这篇文章主要是为了介绍 background-clip 属性，有兴趣的朋友可以自己使用 grid 布局实现一下这个效果。

关于 background-clip

文章最后有所有background-clip 属性的实战效果图和源码。

基础介绍

单词 background-clip 的字面意思就是背景裁剪，表示让背景作用于容器的哪个区域。最常用的有三个值： background-clip:content-box
background-clip:padding-box
background-clip:border-box。默认情况下根据浏览器的默认的盒子模型，background-clip 的默认值是background-clip:padding-box就是说背景生效的范围包括 padding 和 content。

浏览器的盒子模型，注意并没有 margin-box 这一说法。
在这里插入图片描述

属性值

background-clip:content-box

这个值指定背景只在内容区域绘制，不包括内边距（padding）和边框（border）。这意味着背景颜色或图像不会延伸到内边距中。

.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;
}

此例中，元素的背景色只填充内容区域，内边距显示的是元素所在父级的背景色或透明。

background-clip:padding-box

这是默认值，表明背景会延伸到内边距但不包括边框。即背景同时应用于内容和内边距区域。

示例:

.padding-box-example {background-color: lightgreen;padding: 20px;border: 1px solid black;
}
/* 默认行为，显式声明可增强代码可读性 */
.padding-box-example {background-clip: padding-box;
}

这里，背景颜色会填满内容和内边距区域，边框外则无背景。

background-clip:border-box

背景不仅覆盖内容和内边距区域，还会延伸到边框的下层。这是说，边框之下会有背景，但边框本身不会被背景色覆盖。

示例:

.border-box-example {background-color: lightyellow;padding: 20px;border: 1px solid black;background-clip: border-box;
}

背景颜色会扩展到整个元素，包括边框下方，但边框线自身颜色不变。

background-clip:inherit

使元素继承其父元素的 background-clip 值。

示例:

.parent {background-clip: padding-box;
}.child {background-clip: inherit;
}

子元素将采用与父元素相同的背景裁剪方式。

background-clip:initial

将 background-clip 属性设置为其初始值，即 padding-box。

示例:

.initial-clip-example {background-clip: initial; /* 等同于 padding-box */
}

这将重置任何先前设置，使背景裁剪回到默认行为。

background-clip:unset

将 background-clip 的计算值设置为其父元素的值，如果父元素没有设置，则回退到初始值（padding-box）。

示例:

.unset-clip-example {background-clip: unset;
}

如果父元素有设置 background-clip，则继承该值；否则，使用默认值。

background-clip:text

允许背景应用到文本上而不是元素的背景区域，常用于实现文本渐变色等效果。

示例:

.text-clip-example {background-image: linear-gradient(to right， red， orange);-webkit-background-clip: text;color: transparent;
}

注意，-webkit-background-clip: text; 是为了兼容性，因为并非所有浏览器都支持将背景裁剪到文本上。

总结

本文章通过一个需求来引申出一个让背景不包括 padding 的功能，进而系统学习背景裁剪属性 background-clip。包含丰富的讲解和实战示例。有收获的话可以点个赞哟！欢迎留言交流。

效果和源码

效果图
在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width， initial-scale=1.0" /><title>Document</title></head><style>html， body {margin: 0;padding: 0;height: 100vh;}.container {width: 400px;display: flex;flex-wrap: wrap;background-color: antiquewhite;/* background-clip: content-box; */}.content-box-example {background-color: lightblue;padding: 20px;border: 1px solid black;background-clip: content-box;}.padding-box-example {background-color: lightgreen;padding: 20px;border: 1px solid black;/* 默认行为，显式声明可增强代码可读性 */background-clip: padding-box;}.border-box-example {background-color: blue;padding: 20px;/* border包含blue，可以把0.3改成0看效果 */border: 5px solid rgba(255， 0， 0， 0.3);background-clip: border-box;}.inherit-clip-example {.parent {background-clip: border-box;border: 2px solid black;padding: 5px;/*  */background-color: blueviolet;}.child {background-clip: inherit;border: 2px solid black;padding: 5px;background-color: yellowgreen;}}.initial-clip-example {background-color: aquamarine;background-clip: content-box;/* padding是container的背景色 */padding: 5px;border: 2px solid black;.child {background-clip: initial; /* 等同于 padding-box */background-color: blueviolet;/* padding是自己的背景色 */padding: 5px;}}.unset-clip-example {/* container没有设置background-clip */background-clip: unset;/* padding是自己的背景色 */padding: 20px;background-color: red;}.text-clip-example {width: 100px;background-image: linear-gradient(to right， red， orange);-webkit-background-clip: text;color: transparent;font-size: 20px;}</style><body><div class="container"><div class="content-box-example">content-box</div><div class="padding-box-example">padding-box</div><div class="border-box-example">border-box</div><div class="inherit-clip-example"><div class="parent"><div class="child">inherit-clip</div></div></div><div class="initial-clip-example"><div class="child">initial-clip</div></div><div class="unset-clip-example">unset-clip</div><div class="text-clip-example">文字渐变</div></div></body>
</html>