漸變，指外形或色彩的針砭律性的變更，往往可以給人很強(qiáng)的節(jié)拍感和審美情趣，這里研究的主如果色彩的漸變。漸變的情勢(shì)在日常生活中很常見，在網(wǎng)頁中的用的也很多，傳統(tǒng)網(wǎng)頁技巧中往往用圖片來實(shí)現(xiàn)漸變，輕易帶來加載包袱和動(dòng)態(tài)定制的瓶頸。
CSS3供給了實(shí)現(xiàn)漸變的屬性，跟著瀏覽器的慢慢支撐，研究CSS3漸變已勢(shì)在必行。涉及CSS漸變的屬性重要有l(wèi)inear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient四個(gè)屬性，下面來分別解析下，也可以直接看案例。
一、linear-gradient線性漸變
 1.兼容性
如今最新的瀏覽器開端逐漸的支撐線性漸變屬性，并且趨勢(shì)同一，兼容性表格拜見caniuse.com
[img]http://img.blog.csdn.net/20130508135738784可見，對(duì)于最新的瀏覽器而言，應(yīng)用-webkit-前綴和標(biāo)準(zhǔn)屬性即可實(shí)現(xiàn)。然則為了兼容性舊瀏覽器起見，建議應(yīng)用全前綴。
在sublime text3中可以應(yīng)用lg(#0f0,#00f)可以生成以下代碼，最佳的漸變書寫辦法。
[css] view plaincopy

1. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0f0), to(#00f));          /*for Safari 4+, Chrome 2+*/  
2. background-image: -webkit-linear-gradient(#0f0, #00f);                                  /*for Safari 5.1+, Chrome 10+*/  
3. background-image: -moz-linear-gradient(#0f0, #00f);                                     /*for firefox*/  
4. background-image: -o-linear-gradient(#0f0, #00f);                                       /*for opera*/  
5. background-image: linear-gradient(#0f0, #00f);                                          /*標(biāo)準(zhǔn)屬性*/  

2.語法
[img]http://img.blog.csdn.net/20130508194910223

1. 可選參數(shù)，設(shè)置漸變的情勢(shì)，可以有兩種方法，一種是設(shè)置扭轉(zhuǎn)的角度，一種是應(yīng)用關(guān)鍵字。
角度值，0度代表程度大年夜左到右，90度代表垂直大年夜下到上，大年夜0度開端逆時(shí)針角度變換。
關(guān)鍵字，left代表大年夜左到右的漸變，top代表大年夜上到下的漸變，right代表大年夜右到左，bottom代表大年夜上到下；left top代表大年夜左上到右下的漸變，left bottom代表大年夜左下到右上的漸變，right top代表大年夜右上到左下，right bottom代表大年夜右下到左上。
2.設(shè)置第一個(gè)色彩點(diǎn)，漸變開端的色彩。
3.可選參數(shù)，設(shè)置中心色彩點(diǎn)
4.可選參數(shù)，設(shè)置中心色彩的地位
5.設(shè)置停止燈揭捉色
一個(gè)線性漸變至少須要制訂兩個(gè)色彩值。
二、Radial Gradients-徑向漸變
1.兼容性，徑向漸變和線性漸變的兼容性是一致的，最新瀏覽器的兼容須要實(shí)現(xiàn)-webkit和標(biāo)墜現(xiàn)寫法。
[img]http://img.blog.csdn.net/20130508205921099
2.語法
[img]http://img.blog.csdn.net/20130511171538466
1.可選參數(shù)，設(shè)置漸變的中間，60px 45px指距蕩子側(cè)60px距離上部45px，單位可所以像素，也可所以百分比，也可是關(guān)鍵字。默認(rèn)為中間腸位。
2.可選參數(shù)，漸變的外形，可以取值為circle或eclipse，默認(rèn)值為eclipse。
3.可循參數(shù)，漸變的大年夜小，可以取值為

closest-side：

指定徑向漸變的半徑長度為大年夜圓心到離圓心比來的邊

closest-corner：

指定徑向漸變的半徑長度為大年夜圓心到離圓心比來的角

farthest-side：

指定徑向漸變的半徑長度為大年夜圓心到離圓心最遠(yuǎn)的邊

farthest-corner：

指定徑向漸變的半徑長度為大年夜圓心到離圓心最遠(yuǎn)的角

contain：

包含，指定徑向漸變的半徑長度為大年夜圓心到離圓心比來的點(diǎn)。類同于closest-side

cover：

覆蓋，指定徑向漸變的半徑長度為大年夜圓心到離圓心最遠(yuǎn)的點(diǎn)。類同于farthest-corner4.肇端色彩。

5.中心色彩。6.中心色彩地位?？蛇x。
7.終燈揭捉色。
三、案例
重點(diǎn)解析下案例9，實(shí)現(xiàn)步調(diào)和最終效不雅如下圖所示。
[img]http://img.blog.csdn.net/20130512175510685[img]http://img.blog.csdn.net/20130512175537028
[css] view plaincopy

1. #demo9{  
2.     background-color: #026873;  
3.     background-size: 13px, 29px, 37px, 53px;  
4.     background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%);  
5. }  

[css] view plaincopy

1. #demo9{  
2.     background-color: #026873;  
3.     background-size: 13px, 29px, 37px, 53px;  
4.     background-image:   
5.         linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),  
6.         linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%);  
7. }  

四、延長瀏覽
》w3 css-images-3
》gradient
CSS3漸變，前端開辟whqet，做最好的前端開辟blog。
前端開辟whqet，存眷前端開起身術(shù) 分享網(wǎng)頁相干資本。