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

徑向漸變 —— radial-gradient

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

為了創(chuàng)建一個徑向漸變，你必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。

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

語法：

參數(shù)說明：

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

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

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

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

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

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

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

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

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

最基本的徑向漸變

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

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

如上圖，顏色從中心點(diǎn)向外擴(kuò)散，這就是最簡單的徑向漸變。

改變形狀

徑向漸變默認(rèn)是ellipse（橢圓）的，我們還可以使?jié)u變的形狀改變成circle（圓形），如下示例：

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

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

改變圓心位置

用來定義徑向漸變的圓心位置，類似background-position，默認(rèn)為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
    );
}

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

使用多個顏色

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

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

改變顏色的結(jié)束位置

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

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

創(chuàng)建實(shí)線

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

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

色帶和條紋

創(chuàng)建一個徑向的色帶，如下示例：

.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% );
}

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

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

改變漸變的半徑長度

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

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

如下示例：

html：

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

css：

/*指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的角*/
.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);
}
/*指定徑向漸變的半徑長度為從圓心到離圓心最遠(yuǎn)的邊*/
.gradient4 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, #f8f8f8); 
}

效果如下：

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

最后

到此已經(jīng)介紹了徑向漸變的使用方法，下面將會繼續(xù)介紹其它漸變的使用方法，你可以關(guān)注我，繼續(xù)學(xué)習(xí)其它漸變知識。

其它相關(guān)文章：

• css 線性漸變
• css 徑向漸變
• css 圓錐漸變
• css 重復(fù)漸變

參考資料：

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

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

SS3豐富了色彩方面的內(nèi)容，在純色的基礎(chǔ)上加入了漸變色的處理，線性漸變、徑向漸變在web色彩上可以起到畫龍點(diǎn)睛的效果。