先解决需求
实现背景颜色不包括 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>