一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。
径向渐变图案 #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%创建溢出更大。
不要忘记这样的技巧，它可能会有所帮助。颜色值不限于范围[0% 100%]——它们可以更大。
在这种情况下，我们也可以依赖一个 CSS 变量来避免颜色配置的重复：
html {
--c: #c39f76 98%,#0000;
background:
radial-gradient(closest-corner at 20% 20%,var(--c)),
radial-gradient(closest-corner at 80% 20%,var(--c)),
radial-gradient(closest-corner at 20% 80%,var(--c)),
radial-gradient(closest-corner at 80% 80%,var(--c));
background-size: 100px 100px;
}
径向渐变图案 #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像往常一样定义），但这次的颜色配置并不像往常一样。我在内部使用透明颜色，在外部使用主要颜色。应该注意的是，我们也有一个小的溢出。
html {
background-image: radial-gradient(54% 54%,#0000 98%,#c39f76);
background-size: 100px 100px;
}
如您所见，我使用54%而不是50%创建溢出。
第二层是一个较小的圆圈，以白色为主色。整个代码将是：
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()。希望可以帮助到你！
