通过构建背景图学习CSS径向渐变

本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改

如果你是CSS渐变的新手，你可能听说过radial-gradient()。如果以前从未使用过它，那么这篇文章适合你。

在本教程中，我将重点介绍一些真实的和实用的示例，以解释radial-gradient()背后的秘密以及它是如何工作的。

CSS渐变通常用于创建花哨的图案，因此我选择了其中一些仅使用radial-gradient()制作的图案。通过构建它们，我们将了解有关这些渐变的一切。

径向渐变模式#1

让我们从最基本的模式开始。

看上面的图并没有什么复杂的，我们只是重复循环画圆。圆、椭圆、半圆、四分之一圆等等我们都可以使用radial-gradient()创建。

为了简单起见，我们可以考虑椭圆作为主要形状，然后通过隐藏一些部分，我们可以得到半个圆，四分之一个圆等等。

我们放大上面的一个圆来具体分析。

我们正在绘制一个尺寸为100px*100px的区域，该区域是我们的background-size。我们将考虑水平半径等于50%，垂直半径等于50%，形状的中心将是区域的中心。

椭圆由两个半径定义，称为“水平半径”和“垂直半径”。如果两者相等（就像我们的例子一样），我们得到的就是一个圆。

到此我们可以得到以下代码：

html {
  background-image: radial-gradient(50% 50% at center, ???);
  background-size: 100px 100px   
}

我们定义了渐变的设置，现在我们需要定义颜色配置。我们将绘制一个不会接触background-size区域边缘的圆。从50%，我们将有80%的颜色，其余部分将是透明的。

html {
  background-image: radial-gradient(50% 50% at center, #c39f76 0% 80%,#0000 81% 100%);
  background-size: 100px 100px   
}

我们首先定义椭圆的中心和大小（50% 50% at center），然后用渐变色填充它（c39f76 0 80%,#0000 81% 100%）。在这种情况下，我们得到一个完整的圆，因为两个半径相等（50%和100px），并且因为我们在颜色之间没有过渡。

我们有从0%到80%的主色和从81%到100%的透明色。(应该使用80%而不是81%，但我们保留了一个小的过渡以避免锯齿状边缘。）

我们可以通过删除默认值来优化上面的代码，以获得以下内容：

html {
  background-image: radial-gradient(50% 50%,#c39f76 80%,#0000 81%);
  background-size: 100px 100px   
}

默认情况下位置是中心，我们可以从颜色配置中省略0%和100%。

以上并不是实现该模式的唯一语法。我们还可以使用以下方式：

html {
  background-image: radial-gradient(40% 40%,#c39f76 99%,#0000);
  background-size: 100px 100px   
}

我们减小了圆圈的半径，增加主颜色的百分比。请注意这里没有定义任何透明颜色的百分比，因为它应该是100%（默认值），我们可以省略。

我们还可以使用以下方式：

html {
  background-image: radial-gradient(#c39f76 56%,#0000 57%);
  background-size: 100px 100px   
}

我们省略半径，浏览器将使用默认设置，需要另一种颜色配置。不必记住所有的案例，只要坚持一种简单的方法（我推荐第一种）。稍后将通过实践，您将发现实现相同结果的不同方法，并且能够优化语法以减少所使用的代码量。

径向渐变模式#2

这一次用了两个radial-gradient()。我们可以使用尽可能多的背景层，这是一个很不错的功能，它允许我们通过将不同的渐变与不同的配置相结合来构建复杂的图案。

我们在这里保持相同的background-size，但我们使用不同的位置为我们的圈子。代码如下：

html {
   background-image: 
     radial-gradient(?? at 25% 25%,??),
     radial-gradient(?? at 75% 75%,??);
   background-size: 100px 100px; 
}

对于半径配置，如果我们做一些数学计算，我们可以发现我们需要25%使两个圆接触边缘。我们可以使用这个代码：

html {
   background-image: 
     radial-gradient(25% 25% at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(25% 25% at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

我们也可以使用closest-side代替25% 25%。这是一个奇怪的值，但它的意思是“使用一个半径值，允许圆接触最接近其中心的边”。这个值很有用，可以使我们避免处理一些复杂的计算。

html {
   background-image: 
     radial-gradient(closest-side at 25% 25%,#c39f76 80%,#0000 81%),
     radial-gradient(closest-side at 75% 75%,#c39f76 80%,#0000 81%);
   background-size: 100px 100px; 
}

radial-gradient()为我们提供了其他3个类似的值（closest-corner、farthest-side和farthest-corner）。我们要么为半径定义一个明确的大小，要么使用这些值，浏览器将根据特定规则自动查找半径。

径向渐变模式#3

在第一和第二模式之后，我们现在可以尝试更复杂的模式。这一次使用两个渐变，使用两个半圆的组合，不绘制整个圆。

下面是一个例子来帮助你理解这个谜题。我使用不同的颜色来轻松识别每个渐变。

第一个渐变的中心位于50% 100%，而第二个渐变的中心位于50% 0%，但我们也可以使用top和bottom作为它们的等效值。

html {
   background-image: 
     radial-gradient(?? at top   ,??),
     radial-gradient(?? at bottom,??);
   background-size: 100px 100px; 
}

对于半径，我们可以像以前一样使用50% 50%，但这次我将尝试不同的东西，并考虑50px，它是background-size的一半。

当使用像素值或任何不同于百分比的单位时，我们只能指定一个半径，浏览器将理解我们想要一个具有该半径的圆。这是另一种定义形状大小的方法，除了百分比和特定值。

我们的圆将接触边缘，最终的代码如下：

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-size: 100px 100px; 
}

上面的代码并不是我们最终想要的模式，我们还需要最后的润色。如果您检查上一个插图，您会注意到第二个渐变（绿色的）向右移动了一半大小。换句话说，我们需要更新它的background-position：

html {
   background-image: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000);
   background-position: 0 0, 50px 0;
   background-size: 100px 100px; 
}

我们可以通过使用简写版本来优化代码：

html {
   background: 
     radial-gradient(50px at top   ,#c39f76 99%,#0000),
     radial-gradient(50px at bottom,#c39f76 99%,#0000) 50px 0;
   background-size: 100px 100px; 
}

由于我们处理的是像素值，我们可以添加一个CSS变量，使代码易于调整。

html {
   --s: 100px;
   background: 
     radial-gradient(calc(var(--s)/2) at top   ,#c39f76 99%,#0000),
     radial-gradient(calc(var(--s)/2) at bottom,#c39f76 99%,#0000) calc(var(--s)/2) 0;
   background-size: var(--s) var(--s); 
}

径向渐变模式#4

乍一看，这个背景看起来有点复杂。但如果我们能识别出正确的模式，那就很容易了。直觉上，你可能认为模式就是这个，你会很难找到渐变的方式。

但事实并非如此真实的的模式是这个

我们有4个圆圈放置在角落。代码如下：

html {
   background: 
     radial-gradient(closest-corner at 20% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 20%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 20% 80%,#c39f76 98%,#0000),
     radial-gradient(closest-corner at 80% 80%,#c39f76 98%,#0000);
   background-size: 100px 100px;
}

closest-corner定义半径的一个很好的用法。对于每个层，浏览器将绘制一个放置在特定位置的圆，并触摸最近的边缘。此设置允许我们使用一个简单的颜色配置，同时有所需的溢出。

我们也可以使用closest-side，如下所示：

html {
   background: 
     radial-gradient(closest-side at 20% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 20%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 20% 80%,#c39f76 140%,#0000 141%),
     radial-gradient(closest-side at 80% 80%,#c39f76 140%,#0000 141%);
   background-size: 100px 100px;
}

上面代码中唯一的新内容是颜色配置，其中我使用的值大于100%。由于我使用closest-side来定义半径，所以我需要比100%更大才能创建溢出的效果。

径向渐变模式#5

这是另一个非直观的模式，可能会让很多人感到困惑。你可能会把它看作是一个半满的圆圈，但实际上它是两个半圆的组合，如下所示：

代码如下：

html {
  background:
    radial-gradient(50% 50% at left ,#0000 70%,#c39f76 71% 80%,#0000 81%),
    radial-gradient(50% 50% at right,#c39f76 0 80%,#0000 81%);
  background-size: 100px 100px;
}

这一次我们将每一个使用不同的颜色配置。第一个有3种颜色（透明，然后是主颜色，然后再次透明）。第二个具有与我们在前面的示例中使用的相同的颜色配置。

这个图案是一个很好的例子，展示了不同的颜色配置如何成为获得复杂背景图案的另一种方法。

径向渐变模式#6

这是另一个不容易识别的模式，但如果我们仔细观察，我们可以看到两个圆圈。

大圆圈是我们的第一层。

它是一个放置在区域中心的圆圈（像往常一样用background-size定义），但这次颜色配置不像往常一样。我使用透明的颜色为内部和外部的主要颜色。值得注意的是，我们也有一个小的溢出，如下代码所示使用了54%而不是50%来创建溢出。

html {
  background-image: radial-gradient(54% 54%,#0000 98%,#c39f76);
  background-size: 100px 100px;
}

第二层是一个较小的圆圈，以白色为主色。整个代码将是：

html {
  background: 
    radial-gradient(10% 10%,#fff 98%,#0000),
    radial-gradient(54% 54%,#0000 98%,#c39f76) 50px 50px;
  background-size:100px 100px;
}

注意50px 50px的用法。与第三个图案一样，我们需要将其中一个层移动一半大小以获得正确的结果-否则两个圆将具有相同的中心，这不是预期的结果。

径向渐变模式#7

这是我们结束前的最后一个模式：

在最后一个例子中，我想介绍repeating-radial-gradient()，这是编写radial-gradient()的另一种方式。

我们的模式如下：

我们可以使用radial-gradient()来实现上面的功能，但是颜色配置会变得太长（透明，主颜色，透明，主颜色，等等）。

在这种情况下，颜色配置只不过是“透明，主色”的重复图案，并且repeating-radial-gradient()是为了这样的目的而制作的。

html {
  background-image: repeating-radial-gradient(#0000 0% 12%,#c39f76 13% 26% );
  background-size:100px 100px;
}

上面的意思是我们有12%的透明颜色，然后有13%的主要颜色（26-13=13），然后我们重复相同的步骤直到覆盖整个区域。

最后

通过探索如何创建不同的背景图案，我们涵盖了radial-gradient()的基础知识。文章到此结束，但这仅仅是个开始，有兴趣的可以继续尝试使用radial-gradient()构建自己的模式。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）