一、前言
很久之前就了解過css3的線性漸變（linear-gradient），這段時間決定進一步認知這一特性，以下筆記以便日後查閱。
二、css3的各種背景漸變
1. 線性漸變
示例——七彩虹
樣式屬性： linear-gradient(起始角度, color stop, color stop[, color stop]*)起始角度，用於設定線 性漸變效果的起始角度，值為角度數或預設值。角度數的取值範圍是0~365deg，預設值（預設值為top）的取值範圍是 [left,right,top,bottom,center,top right,top left,bottom left,bottom right,left center,right center]。（注意：ie10只能取[left,top]，chrome則沒有[center,left center,right center]）。
color stop，用於設定顏色邊界，color為邊界的顏色；stop為該邊界的位置，stop的值為畫素數值或百分比數值，若為百分比且小於0%或大於100%則表示該邊界位於可視區域外。兩個 color stop 之間的區域為顏色過渡區，顏色將從靠左的邊界的顏色線性漸變為靠右的邊界的顏色。
2. 放射性漸變
示例——七彩虹球
樣式屬性： radial-gradient(圓心座標, 漸變形狀 漸變大小, color stop, color stop[, color stop]*)圓心座標，用於設定放射的圓形座標，可設定為形如10px 20px的 x-offset y-offset ，或使用預設值center（預設值）。
漸變形狀，取值範圍為預設值circle（圓形）和ellipse（橢圓形，預設值）。
漸變大小，取值範圍為如下預設值
closest-side 或 contain ，以距離圓心最近的邊的距離作為漸變半徑。
closest-corner ，以距離圓心最近的角的距離作為漸變半徑。
farthest-side ，以距離圓心最遠的邊的距離作為漸變半徑。
farthest-corner 或 cover ，以距離圓心最遠的角的距離作為漸變半徑。
3. 重複線性漸變
示例——重複的彩虹
樣式屬性： repeating-linear-gradient(起始角度, color stop, color stop[, color stop]*)各配置項的意思和取值規範均與linear-gradient一樣。唯一區別在於最後乙個colo stop所配置的顏色並不會作為元素剩餘部分的背景色，而是不斷重複整個線性漸變處理。
4. 重複放射性漸變
示例——重複的彩虹球
樣式屬性： repeating-radial-gradient(圓心座標, 漸變形狀 漸變大小, color stop, color stop[, color stop]*)各配置項的意思和取值規範均與radial-gradient一樣。
5. 背景漸變模式
將上述四種漸變效果混合就可以創造各種背景漸變模式了！國外css高手的設計：
示例
**：
三、ie5.5~9的背景漸變
由於ie5.5~9不支援css3的漸變特性，因此需要使用ie濾鏡進行處理，而且ie的漸變濾鏡僅提供從left到right，和從top到bottom的線性漸變效果，並且只能是設定為兩種顏色的過渡效果而已。
濾鏡格式：filter:progid:dximagetransfer.microsoft.gradient([startcolorstr='
起始顏色
'|startcolor=起始顏色數值],[endcolorstr='
結束顏色
'|endcolor=結束顏色數值],gradienttype=漸變型別)
gradienttype ，取值範圍——0（預設值，表示從top到bottom漸變），1（表示從left到right漸變）。
startcolor 和 endcolor ，值為十進位制的整數，取值範圍0~4294967295（由startcolorstr和endcolorstr的十六進製制值轉換而來）。
startcolorstr 和 endcolorstr ，值格式為#aarrggbb，其中aa為透明度的十六進製制表示形式，其餘則為rgb的十六進製制表示形式，endcolorstr的預設值為#ff000000，startcolorstr的預設值為#ff0000ff。
四、svg的背景漸變
svg可謂是我最期待的新特性。下面了解一下svg下的背景漸變。
線性漸變示例——彩虹
線性濾鏡的svg標籤為 lineargradient ，其中 x1 和 y1 為漸變的起始位移， x2 和 y2 為漸變的結束位移。而 stop標籤 則用於設定顏色邊界。
其他元素通過 fill:url(#濾鏡id) 來應用該濾鏡。
放射性漸變示例——彩虹
放射性濾鏡的svg標籤為 radialgradient ，其中 cx 和 cy 為圓心位移， r 為漸變半徑， fx 和 fy 為內圈範圍。
注意：濾鏡lineargradient和radialgradient均不能應用到非svg元素上。
五、總結
上述內容僅僅對背景漸變進行簡單介紹，若有紕漏望各位指正，謝謝！
css3 背景漸變
在沒有了解css也可以做背景漸變以前，我都是通過ps一張背景漸變的來應用到自己所做的網頁中。然而，在前不久我了解到css3也可以做背景漸變後，想要做背景漸變的效果就很容易了許多，下面是一些css3做背景漸變的方法。一.線性漸變 自上而下的線性漸變 div 從左往右的線性漸變 div 第乙個引數是漸變...
css3 顏色 背景 漸變
漸變放在 css裡的語句 一定要按這個順序排，才不會出錯。否則 有的瀏覽器會不正常，今天本來調好了，發現ie9不行，搞了半天不行，崩潰了 最後準備還是使用背景算了 最後一次 測試，終於搞定 background moz linear gradient top,fefefe,d3ecff moz火狐 ...
css3實現背景漸變
一 線性漸變 詳細 在css3中，可以使用 linear gradient實現背景線性漸變。linear gradient to left right top bottom 在ff瀏覽器時需要將樣式 書寫成 moz linear gradient chrome瀏覽器時需要寫成 webkit line...