background-clip背景裁剪实现嵌套渐变背景

background-clip属性规定背景的绘制区域。浏览器兼容IE9+。

• border-box：背景被裁剪到边框盒。(默认值)
• padding-box：背景被裁剪到内边距框。
• content-box：背景被裁剪到内容框。

您可能已经看过无数次devtools中的box模型可视化工具：

它向您展示元素的大小和位置，以及该大小是如何构成的：content size内容大小、padding填充、margin边距和border边框。实际上元素还有一个content-box内容框、padding-box填充框和border-box边框框。一般我们使用最多的是border-box。

这些值与background-clip背景裁剪所使用的值相同！也就是说您可以设置一个背景只覆盖那些特定的区域。这样我们就可以实现多个背景嵌套：

.basic {
  width: 50px;
  height: 50px;
  padding: 25px;
  
  border: 25px solid transparent;
  
  background:
    linear-gradient(red, red) content-box,
    linear-gradient(blue, blue) padding-box,
    linear-gradient(green, green) border-box;
}

其实有很多方法可以实现这种效果，比如使用border边框、outline和box-shadow或它们的任意组合实现。但嵌套的渐变背景估计很难实现，您不妨试试background-clip背景裁剪：

.advanced {
  padding: 8px;
  border: 4px solid transparent;
  background:
    linear-gradient(#B7D3F0, #6B90EE) content-box,
    linear-gradient(#c769c2, #211A4D) padding-box,
    linear-gradient(#F1F48C, #8BE5DC) border-box;
  height: 60px;
  width: 220px;
  margin: 20px;
  text-align: center;
  display: inline-block;
  font: 900 20px/60px system-ui, sans-serif;
  border-radius: 10px;
}