渐变，指外形或色彩的针砭律性的变更，往往可以给人很强的节拍感和审美情趣，这里研究的主如果色彩的渐变。渐变的情势在日常生活中很常见，在网页中的用的也很多，传统网页技巧中往往用图片来实现渐变，轻易带来加载包袱和动态定制的瓶颈。
CSS3供给了实现渐变的属性，跟着浏览器的慢慢支撑，研究CSS3渐变已势在必行。涉及CSS渐变的属性重要有linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient四个属性，下面来分别解析下，也可以直接看案例。
一、linear-gradient线性渐变
 1.兼容性
如今最新的浏览器开端逐渐的支撑线性渐变属性，并且趋势同一，兼容性表格拜见caniuse.com
[img]http://img.blog.csdn.net/20130508135738784可见，对于最新的浏览器而言，应用-webkit-前缀和标准属性即可实现。然则为了兼容性旧浏览器起见，建议应用全前缀。
在sublime text3中可以应用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);                                          /*标准属性*/  

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

1. 可选参数，设置渐变的情势，可以有两种方法，一种是设置扭转的角度，一种是应用关键字。
角度值，0度代表程度大年夜左到右，90度代表垂直大年夜下到上，大年夜0度开端逆时针角度变换。
关键字，left代表大年夜左到右的渐变，top代表大年夜上到下的渐变，right代表大年夜右到左，bottom代表大年夜上到下；left top代表大年夜左上到右下的渐变，left bottom代表大年夜左下到右上的渐变，right top代表大年夜右上到左下，right bottom代表大年夜右下到左上。
2.设置第一个色彩点，渐变开端的色彩。
3.可选参数，设置中心色彩点
4.可选参数，设置中心色彩的地位
5.设置停止灯揭捉色
一个线性渐变至少须要制订两个色彩值。
二、Radial Gradients-径向渐变
1.兼容性，径向渐变和线性渐变的兼容性是一致的，最新浏览器的兼容须要实现-webkit和标坠现写法。
[img]http://img.blog.csdn.net/20130508205921099
2.语法
[img]http://img.blog.csdn.net/20130511171538466
1.可选参数，设置渐变的中间，60px 45px指距荡子侧60px距离上部45px，单位可所以像素，也可所以百分比，也可是关键字。默认为中间肠位。
2.可选参数，渐变的外形，可以取值为circle或eclipse，默认值为eclipse。
3.可循参数，渐变的大年夜小，可以取值为

closest-side：

指定径向渐变的半径长度为大年夜圆心到离圆心比来的边

closest-corner：

指定径向渐变的半径长度为大年夜圆心到离圆心比来的角

farthest-side：

指定径向渐变的半径长度为大年夜圆心到离圆心最远的边

farthest-corner：

指定径向渐变的半径长度为大年夜圆心到离圆心最远的角

contain：

包含，指定径向渐变的半径长度为大年夜圆心到离圆心比来的点。类同于closest-side

cover：

覆盖，指定径向渐变的半径长度为大年夜圆心到离圆心最远的点。类同于farthest-corner4.肇端色彩。

5.中心色彩。6.中心色彩地位。可选。
7.终灯揭捉色。
三、案例
重点解析下案例9，实现步调和最终效不雅如下图所示。
[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，存眷前端开起身术 分享网页相干资本。