兩種或多種顏色間平滑過渡的效果
色標：決定了漸變的每種顏色及其出現的位置
每一種漸變效果都是由多個色標組成的（2個及以上）、
屬性：
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為單位
1. 0px 0px
將圓心設定在元素的左上角
2. 50% 50%
將圓心設定在元素的中間位置處
3. right bottom
關鍵字： top / right / bottom / left
/center
將圓心設定在元素的右下角
網頁示例圖：
各主流瀏覽器的主流版本均支援漸變效果
對於不支援漸變的瀏覽器，可以嘗試增加瀏覽器字首去實現漸變的顯示。
firefox ： -moz-
chrome和safari ： -webkit-
opera ： -o-
animation:scroll 5s;
-moz-animation:scroll 5s;
-webkit-animation:scroll 5s;
-o-animation:scroll 5s;
background-image:linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-moz-linear-gradient();
background-image:-o-linear-gradient();
CSS中的顏色漸變
css3功能強大，可以實現顏色漸變的效果，減少了的插入，提高了網頁的執行效率，同時，由於這種漸變是由瀏覽器生成，因此放大後效果更好。顏色漸變，顧名思義，就是在一塊我們指定的區域內，顏色逐漸由一種顏色過渡到另一種顏色，在這個過程中也可以經歷多種顏色。那麼想一下，初始的顏色應該是什麼樣呢，有兩種情況，一...
css中的漸變與浮動
1 漸變 1 線性漸變 background image linear gradient angle,color point,color point ex background image linear gradient to bottom,f9f9f9,cdcdcd 2 徑向漸變 backgrou...
css3 中的漸變
雖說css3 都已經使用多年了，但是關於css3的漸變用的很少。今天遇見了，就學習了一下。首先我們開啟ps，新建乙個畫布，選擇漸變工具，這個時候我們能夠看到頂欄上面的漸變型別如下 第乙個我們選中的是線性漸變，第二個是徑向漸變，第三個是角度漸變，第四個是對稱漸變，第五個是菱形漸變。對於css3 並沒有...