幾種CSS背景漸變過渡效果技巧

、借助background-position實現漸變過渡

<div class="box"></div>

語法：linear-gradient(方向,顏色 位置,顏色 位置);
示例： background: linear-gradient(90deg,red 40%,yellow 50%,green 80%);
參數解析： 其中位置的百分比指的是顏色結束漸變的面積。
方向取值：top，bottom left等／0deg
（如果不寫方向默認為180deg／top），方向前面不要加to。

向參數：【角度參數】

我們以紅色向黃色漸變為例子：

實際顯示圖片如下：

給出案例：提出兩個問題來理解角度

下圖描述紅色向綠色漸變過程，請注意兩個問題

第一：角度為何是負的，代表什么含義？

第二：百分比代表什么呢？

第三：角度永遠開始于漸變線，終止于水平線；順時針為負（有點反人類）

給出3個案例進一步理解角度問題

角度的正負其表現形式就是，漸變顏色的方向問題，就是從哪個顏色到哪個顏色的問題；

角度45 顏色A，顏色B， 實際效果我們從左向右閱讀（習慣問題，其實計算機解碼也是這個方向），就是先A這個顏色，然后再B這個顏色；

如果是負呢？角度-45 顏色A，顏色B，就是先B這個顏色，然后再A這個顏色；

位置參數，就是面積概念這個要理解透徹

案例：我們來看看一個30*30的棋盤案例

這個案例網上一大堆，我們今天進它的原理，原理不清楚啥也干不了，請千萬不要抄代碼，而不懂原理，否則你是不會進步的的；

下面圖片的第一個紅框請注意，任何復雜的圖片都是由簡單的可重復圖片構成，棋盤格就是由這個紅框重復組成的；

我們再思考一個問題？紅框如何組成的能？ 一個白色背景，兩個黑色塊；我們重點關注兩個黑色塊如何完成，問題就解決了。

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

在線咨詢

上一篇：教你十分鐘學會html框架（大神勿噴）零基礎
下一篇：節日自定義頭像吸粉網頁系統開發源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商