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

如果你是CSS漸變的新手，你可能聽說(shuō)過radial-gradient()。如果以前從未使用過它，那么這篇文章適合你。

在本教程中，我將重點(diǎn)介紹一些真實(shí)的和實(shí)用的示例，以解釋radial-gradient()背后的秘密以及它是如何工作的。

CSS漸變通常用于創(chuàng)建花哨的圖案，因此我選擇了其中一些僅使用radial-gradient()制作的圖案。通過構(gòu)建它們，我們將了解有關(guān)這些漸變的一切。

徑向漸變模式#1

讓我們從最基本的模式開始。

圖片

看上面的圖并沒有什么復(fù)雜的，我們只是重復(fù)循環(huán)畫圓。圓、橢圓、半圓、四分之一圓等等我們都可以使用radial-gradient()創(chuàng)建。

為了簡(jiǎn)單起見，我們可以考慮橢圓作為主要形狀，然后通過隱藏一些部分，我們可以得到半個(gè)圓，四分之一個(gè)圓等等。

我們放大上面的一個(gè)圓來(lái)具體分析。

圖片

我們正在繪制一個(gè)尺寸為100px*100px的區(qū)域，該區(qū)域是我們的background-size。我們將考慮水平半徑等于50%，垂直半徑等于50%，形狀的中心將是區(qū)域的中心。

橢圓由兩個(gè)半徑定義，稱為“水平半徑”和“垂直半徑”。如果兩者相等（就像我們的例子一樣），我們得到的就是一個(gè)圓。

到此我們可以得到以下代碼：

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

我們定義了漸變的設(shè)置，現(xiàn)在我們需要定義顏色配置。我們將繪制一個(gè)不會(huì)接觸background-size區(qū)域邊緣的圓。從50%，我們將有80%的顏色，其余部分將是透明的。

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

我們首先定義橢圓的中心和大?。?0% 50% at center），然后用漸變色填充它（c39f76 0 80%,#0000 81% 100%）。在這種情況下，我們得到一個(gè)完整的圓，因?yàn)閮蓚€(gè)半徑相等（50%和100px），并且因?yàn)槲覀冊(cè)陬伾g沒有過渡。

我們有從0%到80%的主色和從81%到100%的透明色。(應(yīng)該使用80%而不是81%，但我們保留了一個(gè)小的過渡以避免鋸齒狀邊緣。）

我們可以通過刪除默認(rèn)值來(lái)優(yōu)化上面的代碼，以獲得以下內(nèi)容：

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

默認(rèn)情況下位置是中心，我們可以從顏色配置中省略0%和100%。

以上并不是實(shí)現(xiàn)該模式的唯一語(yǔ)法。我們還可以使用以下方式：

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

我們減小了圓圈的半徑，增加主顏色的百分比。請(qǐng)注意這里沒有定義任何透明顏色的百分比，因?yàn)樗鼞?yīng)該是100%（默認(rèn)值），我們可以省略。

我們還可以使用以下方式：

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

我們省略半徑，瀏覽器將使用默認(rèn)設(shè)置，需要另一種顏色配置。不必記住所有的案例，只要堅(jiān)持一種簡(jiǎn)單的方法（我推薦第一種）。稍后將通過實(shí)踐，您將發(fā)現(xiàn)實(shí)現(xiàn)相同結(jié)果的不同方法，并且能夠優(yōu)化語(yǔ)法以減少所使用的代碼量。

徑向漸變模式#2

圖片

這一次用了兩個(gè)radial-gradient()。我們可以使用盡可能多的背景層，這是一個(gè)很不錯(cuò)的功能，它允許我們通過將不同的漸變與不同的配置相結(jié)合來(lái)構(gòu)建復(fù)雜的圖案。

圖片

我們?cè)谶@里保持相同的background-size，但我們使用不同的位置為我們的圈子。代碼如下：

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

對(duì)于半徑配置，如果我們做一些數(shù)學(xué)計(jì)算，我們可以發(fā)現(xiàn)我們需要25%使兩個(gè)圓接觸邊緣。我們可以使用這個(gè)代碼：

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%。這是一個(gè)奇怪的值，但它的意思是“使用一個(gè)半徑值，允許圓接觸最接近其中心的邊”。這個(gè)值很有用，可以使我們避免處理一些復(fù)雜的計(jì)算。

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個(gè)類似的值（closest-corner、farthest-side和farthest-corner）。我們要么為半徑定義一個(gè)明確的大小，要么使用這些值，瀏覽器將根據(jù)特定規(guī)則自動(dòng)查找半徑。

徑向漸變模式#3

圖片

在第一和第二模式之后，我們現(xiàn)在可以嘗試更復(fù)雜的模式。這一次使用兩個(gè)漸變，使用兩個(gè)半圓的組合，不繪制整個(gè)圓。

下面是一個(gè)例子來(lái)幫助你理解這個(gè)謎題。我使用不同的顏色來(lái)輕松識(shí)別每個(gè)漸變。

圖片

第一個(gè)漸變的中心位于50% 100%，而第二個(gè)漸變的中心位于50% 0%，但我們也可以使用top和bottom作為它們的等效值。

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

對(duì)于半徑，我們可以像以前一樣使用50% 50%，但這次我將嘗試不同的東西，并考慮50px，它是background-size的一半。

當(dāng)使用像素值或任何不同于百分比的單位時(shí)，我們只能指定一個(gè)半徑，瀏覽器將理解我們想要一個(gè)具有該半徑的圓。這是另一種定義形狀大小的方法，除了百分比和特定值。

我們的圓將接觸邊緣，最終的代碼如下：

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

上面的代碼并不是我們最終想要的模式，我們還需要最后的潤(rùn)色。如果您檢查上一個(gè)插圖，您會(huì)注意到第二個(gè)漸變（綠色的）向右移動(dòng)了一半大小。換句話說(shuō)，我們需要更新它的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; 
}

我們可以通過使用簡(jiǎn)寫版本來(lái)優(yōu)化代碼：

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

由于我們處理的是像素值，我們可以添加一個(gè)CSS變量，使代碼易于調(diào)整。

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

圖片

乍一看，這個(gè)背景看起來(lái)有點(diǎn)復(fù)雜。但如果我們能識(shí)別出正確的模式，那就很容易了。直覺上，你可能認(rèn)為模式就是這個(gè)，你會(huì)很難找到漸變的方式。

圖片

但事實(shí)并非如此真實(shí)的的模式是這個(gè)

圖片

我們有4個(gè)圓圈放置在角落。代碼如下：

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定義半徑的一個(gè)很好的用法。對(duì)于每個(gè)層，瀏覽器將繪制一個(gè)放置在特定位置的圓，并觸摸最近的邊緣。此設(shè)置允許我們使用一個(gè)簡(jiǎn)單的顏色配置，同時(shí)有所需的溢出。

我們也可以使用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;
}

上面代碼中唯一的新內(nèi)容是顏色配置，其中我使用的值大于100%。由于我使用closest-side來(lái)定義半徑，所以我需要比100%更大才能創(chuàng)建溢出的效果。

徑向漸變模式#5

圖片

這是另一個(gè)非直觀的模式，可能會(huì)讓很多人感到困惑。你可能會(huì)把它看作是一個(gè)半滿的圓圈，但實(shí)際上它是兩個(gè)半圓的組合，如下所示：

圖片

代碼如下：

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;
}

這一次我們將每一個(gè)使用不同的顏色配置。第一個(gè)有3種顏色（透明，然后是主顏色，然后再次透明）。第二個(gè)具有與我們?cè)谇懊娴氖纠惺褂玫南嗤念伾渲谩?/p>

這個(gè)圖案是一個(gè)很好的例子，展示了不同的顏色配置如何成為獲得復(fù)雜背景圖案的另一種方法。

徑向漸變模式#6

圖片

這是另一個(gè)不容易識(shí)別的模式，但如果我們仔細(xì)觀察，我們可以看到兩個(gè)圓圈。

圖片

大圓圈是我們的第一層。

圖片

它是一個(gè)放置在區(qū)域中心的圓圈（像往常一樣用background-size定義），但這次顏色配置不像往常一樣。我使用透明的顏色為內(nèi)部和外部的主要顏色。值得注意的是，我們也有一個(gè)小的溢出，如下代碼所示使用了54%而不是50%來(lái)創(chuàng)建溢出。

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

第二層是一個(gè)較小的圓圈，以白色為主色。整個(gè)代碼將是：

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

注意50px 50px的用法。與第三個(gè)圖案一樣，我們需要將其中一個(gè)層移動(dòng)一半大小以獲得正確的結(jié)果-否則兩個(gè)圓將具有相同的中心，這不是預(yù)期的結(jié)果。

徑向漸變模式#7

這是我們結(jié)束前的最后一個(gè)模式：

圖片

在最后一個(gè)例子中，我想介紹repeating-radial-gradient()，這是編寫radial-gradient()的另一種方式。

我們的模式如下：

圖片

我們可以使用radial-gradient()來(lái)實(shí)現(xiàn)上面的功能，但是顏色配置會(huì)變得太長(zhǎng)（透明，主顏色，透明，主顏色，等等）。

在這種情況下，顏色配置只不過是“透明，主色”的重復(fù)圖案，并且repeating-radial-gradient()是為了這樣的目的而制作的。

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

上面的意思是我們有12%的透明顏色，然后有13%的主要顏色（26-13=13），然后我們重復(fù)相同的步驟直到覆蓋整個(gè)區(qū)域。

最后

通過探索如何創(chuàng)建不同的背景圖案，我們涵蓋了radial-gradient()的基礎(chǔ)知識(shí)。文章到此結(jié)束，但這僅僅是個(gè)開始，有興趣的可以繼續(xù)嘗試使用radial-gradient()構(gòu)建自己的模式。