CSS3背景渐变特性

linear-gradient 线性渐变

下面是线性渐变的实现格式：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

大家首先要注意的一点，css3的渐变是实现在background-image里面的，是它的一个属性，在同一个块下面是不能够同时实现渐变和背景图片的，后面的代码将会覆盖前面的代码，以至于前面的代码不能够实现。
direction 这个单词的意思相信大家都清楚，是方向的意思，那么就很简单了;如to left，to right，to top，to bottom，当然他们还可以组合使用，例如to left top,这样就可以控制渐变的方向，当然to代表是向哪里渐变，例如to top是向上渐变，如果你没有设置它的方向，那么它是默认向上渐变的。那么它的值其实还可以设置角度例如60deg
假设整个块标签是一个正方形，那么它里面的渐变方向将会顺时针旋转60deg，这样也会更利于我们做出更好看的效果。在这之后的其他参数便是渐变的颜色，按照自己喜欢的顺序填写。
如果你需要实现颜色渐变虚化的效果，那么你就必须在颜色参数部分填写rgba，如下例：

渐变虚化实例

1. background-image: linear-gradient(to right,rgba(255,0,0,1),rgba(255,0,0,0));

 

2. background-image: linear-gradient(to right,#14D0FF ,#4167FF);

实现效果图如下：

 

下面是径向渐变的代码实现格式：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变其实就是围绕一个圆发生的渐变，仔细看radial-gradient当中的参数，可以填写shape形状，size大小和position位置；

position 的值有两个，实际上就是这个径向渐变在这个块中的位置，我们常用百分号去设置，当然也可以直接使用px来设置，注意设置的是渐变中心的位置；

shape 的值为circle和ellipse，默认情况下是ellipse；

size 表达的是渐变范围,它常有以下四个值：

closest-side 靠近容器最近的边
farthest-side 靠近容器最远的边
closest-corner 靠近容器最近的角
farthest-corner 靠近容器最远的角（注意这里的角是角落不是角度）
那么这里可能就会有些同学搞不懂了，就会有一些比较大的疑问，那么下面我给你们举个例子你就明白了；

size属性实例讲解

我们这边设置一个宽200px，高100px的div，然后设置径向渐变closest-side，其实它的意思是当靠近容器最近的一条边的时候就停止渐变，这里其实表达的是一个渐变范围

div{
    background-image: radial-gradient(closest-side circle at 90% 50%,red,green);
    height: 100px;
    width: 200px;
}
效果图如下：

大家很明显的看到，我之前设置的x轴的position为90%，已经非常靠近右边的边界了，所以你看它在靠近右边边界的时候就停止了渐变，因此它表现的非常小。这里再解释一下之所以后面为什么有那么大一块绿色，是因为它自动做了一个颜色的填充，并不是绿色的没有渐变；

我们将closest-side改成 farthest-side以后效果图如下：

createRadialGradient(x1，y1，r1，x2，y2，r2) 方法创建放射状/圆形渐变对象

其实在canvas中这两个渐变都差不多，我们就住要理解一下参数
主要是渐变开始圆的圆心的坐标和半径 和 渐变结束圆的圆心的坐标和半径；

//这里的代码基本和上面的相同，具体注释请参照上面
    $(function(){
        var canvas = $('canvas')[0];
        var item = canvas.getContext('2d');
        style = item.createRadialGradient(100,100,20,100,100,100);
        style.addColorStop(0,'red');
        style.addColorStop(1,'white');
        item.fillStyle = style;
        item.fillRect(0,0,200,200);
    })

效果图如下：

大家要注意一点，就是canvas里面的径向渐变是一个圆渐变为另一个圆，这就要区分两个圆的圆心的位置，判断两个圆是否相交或者不相交，这样的渐变效果就会变得不同，最要注意的一点就是渐变是一第一个圆心到第二个圆的渐变，切记是第二个圆，不是渐变到第二个圆的圆心，只要注意这点就好，其他情况我这里就不多做解释了，大家自行尝试，我这里仅有两个圆圆心一样的情况，因此大家就会看到如上图一样的有规律的向外渐变。