一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
如果你是 CSS 渐变的新手，你可能听说过一个叫做radial-gradient(). 如果您以前从未使用过它，那么您来对地方了。
在本教程中，我将重点介绍一些真实且实用的示例来解释其背后的秘密radial-gradient()以及它是如何工作的。
CSS Gradients 通常用于创建花哨的图案，因此我选择了其中一些仅使用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
}
基本上，我们首先定义椭圆的中心和大小（the 50% 50% at center），然后我们用渐变色填充它（the c39f76 0 80%,#0000 81% 100%）。在这种情况下，我们得到一个完整的圆，因为两个半径相等 ( 50%of 100px) 并且因为我们没有颜色之间的过渡。
我们有主色 from 0%to80%和透明 from 81%to 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
用径向渐变制作的图案
对于这个，我将使用 2radial-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）。我们要么为半径定义明确的大小，要么使用这些值，浏览器将根据特定规则自动查找半径。
正如我之前所说，您不需要记住所有内容。我试图专注于基础知识，radial-gradient()同时提供尽可能多的信息供您以后使用。
径向渐变图案#3
我正在增加这个难度。在第 1 和第 2 模式之后，我们现在可以尝试更复杂的模式。这个也是使用两个渐变制作的，我们不会有完整的圆，而是两个半圆的组合。
下面是一个帮助你理解谜题的插图。我使用不同的颜色来轻松识别每个渐变。
第一个渐变的中心位于 at50% 100%而第二个渐变位于 at50% 0%但我们也可以使用topandbottom作为它们的等效值。
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);
}
我们只更改一个值，而不是更新不同的值！
