css3功能強大，可以實現顏色漸變的效果，減少了的插入，提高了網頁的執行效率，同時，由於這種漸變是由瀏覽器生成，因此放大後效果更好。
顏色漸變，顧名思義，就是在一塊我們指定的區域內，顏色逐漸由一種顏色過渡到另一種顏色，在這個過程中也可以經歷多種顏色。那麼想一下，初始的顏色應該是什麼樣呢，有兩種情況，一種是點，一種是線。當初始的顏色區域是乙個點的時候，他會呈輻射轉向外逐漸改變自己的顏色，這種變化我們叫做徑向漸變。當初始顏色為一條線時，他會延自身垂線方向逐漸改變顏色，這種變化我們稱之為線性漸變，下圖為兩個簡單的例子方便理解。
首先我們來研究線性漸變，線性漸變的完整寫法為：
background-image: linear-gradient(direction, color1 percent1, color percent2, …);
direction會控制漸變的方向，預設為to bottom（180deg），也就是說，0deg為0點鐘方向，沿順時針逐漸增大。color為顏色屬性，可以自由定義，同樣的也可以自由地定義個數。percent為位置屬性，也就是你希望的顏色出現的位置，通常用百分數表示，當不寫這個值時，預設為平均分配。以下為幾個簡單的例子。
解釋：從左至右完成漸變指令，初始為#09e100顏色，70%位置為#0023e1顏色，最右邊為#534顏色。
解釋：向30度角方向（0度為12點方向）完成漸變任務，前30%不發生漸變，全部為#ffff00顏色，65%位置為#ff0000顏色，最終為#00ff00顏色。
可以看出，想完成最簡單的漸變，至少需要兩個顏色和乙個方向，更複雜的就可以按照藝術功底自由發揮了。
接下來我們聊一聊徑向漸變，徑向漸變的完整寫法如下：
background-image:radial-gradient(position , shape ，size first-color, …, last-color);
posititon為漸變色起始點的位置，可以用百分數表示，也可以用畫素表示，x軸在前，y軸在後，中間用空格隔開。
shape為形狀，預設為橢圓（ellipse），如果希望是圓形，可以手動改為circle。
size為漸變區域的大小，當shape為圓時，size可以設定畫素，限定漸變區域的半徑，不可以設定為百分比。當shape為橢圓時，size可以設定畫素或百分比，當設定百分比時，他分別表示長邊半徑和短邊半徑與元素寬與高的比值。無論哪種方法，都可以使用以下幾種方式設定。closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。當遇到漸變停止點時，剩下的面積仍會被顏色填滿，顏色為截止時該方向的顏色。
以下為幾個簡單的例子：
漸變中心在60%，55%位置，擴散形狀為橢圓形，擴散到最遠的角落停止，顏色經歷藍、綠、黃、黑，從中心點至最遠角的連線上，顏色均勻分配。
漸變中心在元素中心，擴散方式為橢圓，橫向半徑為30px，縱向半徑為50px，顏色由黃至紅，紅色第一次出現的位置是橫向半徑為30px，縱向半徑為50px的橢圓的邊界，以外的位置均為紅色。
最後來說一下重複漸變，也就是本文一開始那兩幅圖中的第二幅，顯然多次寫顏色太麻煩了，因此引入新的寫法：reapting-radial-gradient。內部結構寫法與徑向漸變相同，可以看以下的例子。
擴散中心為水平20px，垂直50px位置，擴散方式為圓，在圓心至最近角的連線上，0%位置為綠，20%位置為藍，40%位置為紫，60%位置為綠。。。以此類推，最近角是為了設定這根連線的位置，擴散仍將繼續，想象聖誕糖果的樣子。那麼，不改變屬性裡的內容，radial-gradient會是什麼樣子呢？
css顏色漸變
華麗麗的分割線 123 用css實現網頁背景漸變的 如下 一 從上往下漸變 example source code body 二 從左上至右下漸變 example source code body 三 從左往右漸變 example source code body 一 從上往下漸變 example ...
css 顏色漸變
漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。要得上面的線性漸變效果，我們這樣去定義css3樣式 background image moz linear gradient top,8fa1ff,3757fa firefox background...
CSS顏色漸變
使用角度 如果你想要在漸變的方向上做更多的控制，你可以定義乙個角度，而不用預定義方向 to bottom to top to right to left to bottom right，等等 語法background linear gradient angle,color stop1,color s...