1. 什麼是漸變
兩種或多種顏色間平滑過渡的效果
2. 漸變的組成（元素）
色標：決定了漸變的每種顏色及其出現的位置
每一種漸變效果都是由多個色標組成的（2個及以上）、
3. 漸變的語法
1.語法：
屬性：
background-image
值：
linear-gradient() : 線性漸變
radial-gradient（）： 徑向漸變
repeating-linear-gradient（）： 重複線性
repeating-radial-gradient（）： 重複徑向
2.線性漸變：
語法：
：background-image:linear-gradient(angle,color-point,..);
angle: 方向或角度-即漸變的填充方向
值：
關鍵字：
to top ：從下向上填充
to right ： 從左向右填充
to bottom ： 從上向下填充
to left ： 從右向左填充
角度： 0deg ~ 360deg
0deg ： to top
90deg ： to right
180deg ：to bottom
270deg ： to lef
color-point : 色標，表示每個顏色值，及其出現的位置，多個色標之間用
，分隔
**ex（例子）：**
1. red 0%
開始的時候的是紅色
2. blue 50px
填充到第50像素時，變爲藍色
3. 色標的位置可以省略
省略爲之後，每個將平均 分配元素區域
命令顯示圖：
網頁示例圖：
3. 徑向漸變：
語法：
background-image:radial-gradient([size at position],color-point,color-point);
size at position: 徑向漸變的半徑，以及圓心位置
size: 圓的半徑， px爲單位
position：圓心位置
1. 0px 0px
將圓心設置在元素的左上角
2. 50% 50%
將圓心設置在元素的中間位置處
3. right bottom
關鍵字： top / right / bottom / left
/center
將圓心設置在元素的右下角
命令顯示圖：
網頁示例圖：
4. 瀏覽器的兼容性
各主流瀏覽器的主流版本均支持漸變效果
對於不支持漸變的瀏覽器，可以嘗試增加瀏覽器前綴去實現漸變的顯示。
Firefox ： -moz-
Chrome和Safari ： -webkit-
Opera ： -o-
1. 如果瀏覽器不支持屬性的話，則將前綴加到屬性名稱前：
ex（例子）：
animation:scroll 5s;
-moz-animation:scroll 5s;
-webkit-animation:scroll 5s;
-o-animation:scroll 5s;
2. 如果瀏覽器支持屬性，但不支持值的話，則將前綴加載到屬性值的前面：
ex（例子）：
background-image:linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();