本文翻译自 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）