前端入門-css 徑向漸變

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

徑向漸變 —— radial-gradient

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

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

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

語(yǔ)法：

參數(shù)說(shuō)明：

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

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

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

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

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

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

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

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

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

最基本的徑向漸變

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

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

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

改變形狀

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

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

圓形的漸變

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

改變圓心位置

用來(lái)定義徑向漸變的圓心位置，類似background-position，默認(rèn)為center，除此還可以使用top、left、bottom、right、center、<length>、<percentage>等值。以及提供兩個(gè)命名值（例如 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%位置

使用多個(gè)顏色

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

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)建一個(gè)徑向的色帶，如下示例：

.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é)束位置改成等于后面顏色的開始位置，就會(huì)形成徑向的條紋效果，如下示例：

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

改變漸變的半徑長(zhǎng)度

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

closest-side：指徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的邊；
closest-corner：指徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最近的角；
farthest-side：指徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(yuǎn)的邊；
farthest-corner：指徑向漸變的半徑長(zhǎng)度為從圓心到離圓心最遠(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：

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

效果如下：

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

最后

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

其它相關(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/

言

“等風(fēng)來(lái)不如追風(fēng)去，追逐的過(guò)程就是人生的意義”。

借朋友吉言，“2018在頭條，2019成為頭條”，這就是我2019的目標(biāo)，我已經(jīng)在追風(fēng)的路上。你呢？不要停下腳步，繼續(xù)前行吧。

今天來(lái)個(gè)實(shí)用的小知識(shí)，看下圖：