如何设置让背景颜色不包括 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>