1：基本概念

• 在兩個或者多個指定的顏色之間顯示平穩的過渡

• 漸變的效果是由瀏覽器生成的

• 漸變的型別主要分為兩種：線性漸變（Linear Gradients）和徑向漸變（Radial Gradients）；線性漸變是一個向上、向下、向左、向右或者對角方向的漸變，而徑向漸變則是由它們的中心定義。

• 作為元素的background-image（background）使用

2：瀏覽器的支援情況

因為它是一個比較新的屬性，所以它在瀏覽器中使用時需要新增它的字首，下面的圖片是完全支援該屬性的第一個瀏覽器版本：

不同廠商的瀏覽器的字首也是不一樣的，比如：

.header {
   /* Safari */
   background: -webkit-linear-gradient(red, blue);

   /* Opera */
   background: -o-linear-gradient(red, blue);

   /* Firefox */
   background: -moz-linear-gradient(red, blue);

   /* 標準的語法
 
, 放在最後 */
   background: linear-gradient(red, blue);
}

不同的瀏覽器廠商在實現這個標準時也是略有不同的，比如關於方向的定義，角度的定義，是順時針還是逆時針。

資源搜尋網站大全 https://www.renrenfan.com.cn

3：線性漸變（Linear Gradients）

基本語法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

在不新增角度和方向的前提下，預設是從上到下

background: linear-gradient(color1, color2);

從左到右

to right/left/bottom/top
background:linear-gradient(to right,#147B96,#E6D205);

對角（需要把兩個方向相結合）

to right bottom/right top/left bottom/left top
background:linear-gradient(to bottom right,#147B96,#E6D205);

使用角度

background: linear-gradient(45deg, #147B96 , transparent);

多種顏色

background: linear-gradient(to right, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
background: linear-gradient(to right, #147B96, #E6D205 50px, #147B96 50px, #E6D205 50px, #147B96);
 

重複漸變

background: repeating-linear-gradient(to right, #147B96, #E6D205 5%, #147B96 10%, #E6D205 20%);

宣告多個 - 逗號分隔 - 最先宣告優先順序最高

background: linear-gradient(green 10px, transparent 10px),
           linear-gradient(90deg,green 10px, transparent 10px) repeat left top / 40px,
            linear-gradient(transparent 40px, green 4px);

4：徑向漸變 (Radial Gradients)

基本語法

background: radial-gradient(center, shape size, start-color, ..., last-color);

漸變中心，整個圖形的中心點，既可以使用px，也可以使用%。

background-image: radial-gradient(0% 0%, red, green, blue);

漸變形狀，主要是有兩種：circle（圓形）和ellipse（橢圓形）

background:radial-gradient(circle, red, green, blue);

漸變大小

• closest-side- 漸變的半徑長度為從圓心到離圓心最近的邊

• closest-corner- 漸變的半徑長度為從圓心到離圓心最近的角

• farthest-side- 漸變的半徑長度為從圓心到離圓心最遠的邊

• farthest-corner- 漸變的半徑長度為從圓心到離圓心最遠的角

background:radial-gradient(circle at farthest-corner, red, green, blue);

漸變中心、漸變形狀和漸變大小這三個就是徑向漸變的主要使用，除此之外，也可以和線性漸變一樣使用多種顏色，重複漸變以及宣告多個漸變。

這篇文章主要分享了Linear Gradients（線性漸變）與Radial Gradients（徑向漸變）的基本概念, 介紹了兩種漸變的常用屬性，最後結合了Linear Gradients例項介紹了css3漸變在實際中的部分應用場景。