淺探css3漸變

css3的漸變屬性已經在各種網頁設計中被廣泛使用，在沒有css3的漸變屬性之前，要實現一些多種顏色切換的效果圖，你可能別無他法，只能用乙個來顯示，雖然你知道使用需要網路請求，既耗頻寬又耗時間，下面我將介紹用css3的漸變來改善這一問題。

想要知道線性漸變有什麼用，當然要先學習它的屬性和用法。下面我們先一起學習一下線性漸變的屬性。

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);

linear-gradient函式的第乙個引數是角度或者方向，第二個引數是截止顏色的值，要想產生漸變的效果，當然至少要兩個或者兩個以上的顏色值。先來看乙個簡單的例子：

div

如上圖所示，建立乙個100*100的方塊，從上到到下線性漸變，又白色過渡到灰色，linear-gradient不傳位置引數時預設從頂部到底部進行線性漸變，下面來看乙個有位置資訊的漸變例子：

div

位置資訊的傳遞由to關鍵加上位置，表示向什麼方向進行顏色漸變，上面表示由左向右進行顏色漸變，那想向右上角漸變怎麼辦呢？很簡單，linear-gradient(to right top, white, gray)就可以了，那傳入角度又是怎麼線性漸變的呢？來看個例子：

div

這個角度指的是什麼呢？新標準中將0deg指向北方，並且順時針增加，因此在上圖當傳入角度為0deg時，由下而上進行漸變。

有的時候你可能不想從一開始就出現漸變，想在某個指定的位置開始漸變，這該怎麼辦呢？來看個例子：

我們在希望梯度開始的地方的地方加個同樣色值的顏色中間點，就像上面那樣，在80%的位置開始漸變

這又是個什麼函式？這個函式的用法引數和linear-gradient一摸一樣，但是它會在所以方向上重複漸變以覆蓋其整個容器。不懂什麼意思？來看個例子就明白了：

看了例子是不是就一目了然了，在7%的位置開始漸變，漸變到10%的位置，然後重複

話不多說直接上例子：

上面的方案文圖案是怎麼實現的呢？來看具體樣式：

div

**是不是很簡單呢？實際上就是利用的background-image屬性先豎話30*30的格仔，像右漸變，在50%的地方漸變到透明色，然後在橫畫，向下漸變，在50%的地方漸變到透明色，再疊加，是不是很簡單呢？趕緊自己去試試吧！

徑向漸變用來展示由原點（漸變中心）輻射開的顏色漸變。我們先來看一下radial-gradient的基本語法：

radial-gradient( [ circle || ] [ at ]? ,

| [ ellipse || [| ]] [ at ]? ,

| [ [ circle | ellipse ] || ] [ at ]? ,

| at ,

[ , ]+ )

介紹了基本的概念之後，讓我們來看乙個例子：

上面例子是最簡單的徑向漸變，所有的取值都是預設值，漸變中心預設為容器中心，漸變的形狀為圓形

接下來讓我們兩個稍微複雜一點的例子，指定漸變中心和漸變終止位置：

漸變的起始位置(30, 30)，終止位置位於距離容器最近的邊，再來看乙個對比的例子，當終止位置位於距離漸變中心最遠的邊時：

下面讓我們再加點料，加上第三種顏色，並且指定漸變位置：

上面都是用圓形漸變介紹了漸變用法，接下來簡單介紹一下橢圓的徑向漸變，來看乙個簡單例子

和圓形漸變有點不一樣的地方就在於圓形漸變設定的是圓的半徑，而橢圓漸變設定的橢圓的橫軸半徑和縱軸半徑

repeating-radial-gradient建立乙個原點輻射的重複漸變的圖形，和radial-gradient採用的是同樣的引數，下面讓我們通過乙個例子看一下兩者之間的差別：

上面的例子很簡單的就實現圓點矩陣，關鍵就是通過background-position設定圖層的位置，讓兩個圖層恰

好互補