嵌套渐变与 background-clip

我不能说我经常使用 background-clip。 我敢说它在日常 CSS 工作中几乎从未被使用过。 但我在 Stefan Judis 的一篇博文中 想起了它，巧合的是，这篇文章本身是对 Ana Tudor 在这里的一篇博文 的学习回应。

以下是一个简要说明。

您可能已经见过这个东西无数次了

它向您展示了一个元素的大小和位置，以及该大小是如何组成的：内容大小、填充、边距和边框。

这些东西不仅仅是理论上的，可以帮助理解和调试。 元素实际上具有内容框、填充框和边框框。 也许我们最常遇到这种情况是当我们实际设置 box-sizing 属性时。（它对 普遍设置为 border-box 非常有用）。

这些值与 background-clip 使用的值相同！ 这意味着您可以将背景设置为仅覆盖这些特定区域。 由于 多个背景 是一个东西，这意味着我们可以拥有多个具有不同裁剪的背景。

就像这样

查看 CodePen 上的示例
多个 background-clip by Chris Coyier (@chriscoyier)
在 CodePen 上。

但这很无聊，而且有很多方法可以实现这种效果，例如使用边框、outline 和 box-shadow 或它们的任何组合。

更有趣的是，这些背景可以是渐变，而这用其他方法很难实现！

查看 CodePen 上的示例
嵌套渐变 by Chris Coyier (@chriscoyier)
在 CodePen 上。