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

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

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

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

徑向漸變模式#1

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

圖片

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

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

我們放大上面的一個圓來具體分析。

圖片

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

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

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

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

我們定義了漸變的設(shè)置，現(xiàn)在我們需要定義顏色配置。我們將繪制一個不會接觸background-size區(qū)域邊緣的圓。從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%的透明色。(應(yīng)該使用80%而不是81%，但我們保留了一個小的過渡以避免鋸齒狀邊緣。）

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

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

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

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

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

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

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

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

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

徑向漸變模式#2

圖片

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

圖片

我們在這里保持相同的background-size，但我們使用不同的位置為我們的圈子。代碼如下：

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

對于半徑配置，如果我們做一些數(shù)學(xué)計算，我們可以發(fā)現(xiàn)我們需要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%。這是一個奇怪的值，但它的意思是“使用一個半徑值，允許圓接觸最接近其中心的邊”。這個值很有用，可以使我們避免處理一些復(fù)雜的計算。

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）。我們要么為半徑定義一個明確的大小，要么使用這些值，瀏覽器將根據(jù)特定規(guī)則自動查找半徑。

徑向漸變模式#3

圖片

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

下面是一個例子來幫助你理解這個謎題。我使用不同的顏色來輕松識別每個漸變。

圖片

第一個漸變的中心位于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的一半。

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

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

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

我們可以通過使用簡寫版本來優(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; 
}

由于我們處理的是像素值，我們可以添加一個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

圖片

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

圖片

但事實并非如此真實的的模式是這個

圖片

我們有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定義半徑的一個很好的用法。對于每個層，瀏覽器將繪制一個放置在特定位置的圓，并觸摸最近的邊緣。此設(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來定義半徑，所以我需要比100%更大才能創(chuàng)建溢出的效果。

徑向漸變模式#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種顏色（透明，然后是主顏色，然后再次透明）。第二個具有與我們在前面的示例中使用的相同的顏色配置。

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

徑向漸變模式#6

圖片

這是另一個不容易識別的模式，但如果我們仔細觀察，我們可以看到兩個圓圈。

圖片

大圓圈是我們的第一層。

圖片

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

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的用法。與第三個圖案一樣，我們需要將其中一個層移動一半大小以獲得正確的結(jié)果-否則兩個圓將具有相同的中心，這不是預(yù)期的結(jié)果。

徑向漸變模式#7

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

圖片

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

我們的模式如下：

圖片

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

在這種情況下，顏色配置只不過是“透明，主色”的重復(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ù)相同的步驟直到覆蓋整個區(qū)域。

最后

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