详解CSS3渐变

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。
CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient四个属性，下面来分别解析下，也可以直接看案例。

一、linear-gradient线性渐变

 1.兼容性

现在最新的浏览器开始逐渐的支持线性渐变属性，并且趋向统一，兼容性表格参见caniuse.com

可见，对于最新的浏览器而言，使用-webkit-前缀和标准属性即可实现。但是为了兼容性旧浏览器起见，建议使用全前缀。

在sublime text3中可以使用lg(#0f0,#00f)可以生成以下代码，最佳的渐变书写方法。

[css]  view plain copy

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.语法

1. 可选参数，设置渐变的形式，可以有两种方式，一种是设置旋转的角度，一种是使用关键字。

角度值，0度代表水平从左到右，90度代表垂直从下到上，从0度开始逆时针角度变换。

关键字，left代表从左到右的渐变，top代表从上到下的渐变，right代表从右到左，bottom代表从上到下；left top代表从左上到右下的渐变，left bottom代表从左下到右上的渐变，right top代表从右上到左下，right bottom代表从右下到左上。

2.设置第一个颜色点，渐变开始的颜色。

3.可选参数，设置中间颜色点

4.可选参数，设置中间颜色的位置

5.设置结束点颜色

一个线性渐变至少需要制定两个颜色值。

二、Radial Gradients-径向渐变

1.兼容性，径向渐变和线性渐变的兼容性是一致的，最新浏览器的兼容需要实现-webkit和标准两种写法。

2.语法

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，实现步骤和最终效果如下图所示。

[css]  view plain copy

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 plain copy

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，关注前端开发技术 分享网页相关资源。