前端入門-css 徑向漸變

篇我們將著重介紹css的徑向漸變，注意它和線性漸變的區別。

徑向漸變 —— radial-gradient

徑向漸變與線性漸變的不同之處在于它從一個點開始向外散發。CSS漸變通常用于模擬光源，我們知道它并不總是直的。這使得徑向漸變中顏色之間的過渡看起來更加自然。

為了創建一個徑向漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。

同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

語法：

參數說明：

<position>：用來定義徑向漸變的圓心位置，類似background-position，默認為center。可用關鍵字top、left、bottom、right、center、<length>、<percentage>或者同時使用2個關鍵字表示那個角如：top left（左上角）。

<angle>是角度，單位為deg。

<shape>：定義徑向漸變的形狀，有兩個可選值“circle”（圓形）和“ellipse”（橢圓）。

<size>：用來確定徑向漸變的半徑長度大小，默認值為“farthest-corner”，其他值：

closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角；

<stop > = <color> [ <length> | <percentage>]:

<color>：指漸變得起止顏色。

<length>：用長度值指定起止色位置，不允許負值。

<percentage>：用百分比指定起止色位置。

最基本的徑向漸變

我們沒有聲明任何屬性，只設置了2種顏色，如下示例：

.gradient {
  background-image:
    radial-gradient(
      #fff000,
      #e52e71
    );
}

如上圖，顏色從中心點向外擴散，這就是最簡單的徑向漸變。

改變形狀

徑向漸變默認是ellipse（橢圓）的，我們還可以使漸變的形狀改變成circle（圓形），如下示例：

background-image:
    radial-gradient(
      circle,
      #fff000,
      #e52e71
    );

圓形的漸變

為了更好地觀察圓形和橢圓的區別，看如下動畫，從橢圓變成圓形：

改變圓心位置

用來定義徑向漸變的圓心位置，類似background-position，默認為center，除此還可以使用top、left、bottom、right、center、<length>、<percentage>等值。以及提供兩個命名值（例如 top center）的組合表示圓心的位置。

如下示例：

/*圓心在左邊中心*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圓心在左邊

/*圓心在右上角*/
background-image:
    radial-gradient(
      circle at top right,
      #0000ff,
      #e52e71
);

圓心在右上角

/*圓心在距離左邊100px位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 100px,
      #0000ff,
      #e52e71
    );
}

距左邊100px位置

/*圓心在距離左邊30%位置*/
.gradient{
  height:300px;
  width:300px;
  background-image:
    radial-gradient(
      at 30%,
      #0000ff,
      #e52e71
    );
}

左邊30%位置

使用多個顏色

徑向漸變也可以設置多個顏色的漸變,每種顏色以逗號隔開，如下示例：

background: radial-gradient(lime, red ,cyan, yellow );

改變顏色的結束位置

和線性漸變一樣，徑向漸變的顏色也可以改變其結束位置，如下示例：

background-image:
    radial-gradient(
      red 28px, blue 80%, green
    );

創建實線

使其相鄰顏色的結束位置一樣，如下示例：

background: radial-gradient(cyan 50%, red 50% );

色帶和條紋

創建一個徑向的色帶，如下示例：

.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
}
或
.multiposition-stops {
   background: radial-gradient(
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

我們將上面的每種顏色的結束位置改成等于后面顏色的開始位置，就會形成徑向的條紋效果，如下示例：

background: radial-gradient(
       lime 20%, red 20% 45%, cyan 35% 70%, yellow 70% );

改變漸變的半徑長度

用來確定徑向漸變的結束形狀大小，默認值為“farthest-corner”，其他值：

closest-side：指徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指徑向漸變的半徑長度為從圓心到離圓心最遠的角；

如下示例：

html：

<div class="grid">
  <div class="item gradient4">farthest-side(離圓心最遠的邊)</div>
  <div class="item gradient2">closest-side(離圓心最近的邊)</div>
  <div class="item gradient1">farthest-corner(離圓心最遠的角)</div> 
  <div class="item gradient3">closest-corner(離圓心最近的角)</div>
</div>

css：

/*指定徑向漸變的半徑長度為從圓心到離圓心最遠的角*/
.gradient1 {
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最近的邊*/
.gradient2 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, #f8f8f8); 
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最近的角*/
.gradient3 {
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, #f8f8f8);
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊*/
.gradient4 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, #f8f8f8); 
}

效果如下：

如上所示，就是漸變半徑長度不同類型，注意這里如果圓心的位置在正中間，farthest-corner 和 closest-corner 一樣，同理 farthest-side 與 closest-side也一樣。

最后

到此已經介紹了徑向漸變的使用方法，下面將會繼續介紹其它漸變的使用方法，你可以關注我，繼續學習其它漸變知識。

其它相關文章：

css 線性漸變
css 徑向漸變
css 圓錐漸變
css 重復漸變

參考資料：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

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

SS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

這里用到了徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用徑向漸變的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

CSS不規則卡片，純CSS制作優惠券樣式，CSSS實現鋸齒樣式

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。

在線咨詢

上一篇：Web前端設計秘籍-30個工作中常用的CSS樣式
下一篇：HTML基礎操作：圖片顯示

您的項目需求

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

整合營銷服務商

前端入門-css 徑向漸變

徑向漸變 —— radial-gradient

最基本的徑向漸變

改變形狀

改變圓心位置

使用多個顏色

改變顏色的結束位置

創建實線

色帶和條紋

改變漸變的半徑長度

最后

徑向漸變模式#1

徑向漸變模式#2

徑向漸變模式#3

徑向漸變模式#4

徑向漸變模式#5

徑向漸變模式#6

徑向漸變模式#7

最后

布局

CSS修飾

1、優惠券金額和過期時間樣式

主題顏色

小結

您的項目需求