CSS3 gradient 颜色渐变效果

CSS3 Gradient分为 linear-gradient(线性渐变) 和 radial-gradient（径向渐变）。为了更好的应用CSS3 Gradient, 须要先了解一下目前的几种浏览器的内核，主要有Mozilla( Friefox, Flock等)， webkit(Safari, chrome等)，Opera(Opera浏览器)， Trident(IE浏览器)。

线性渐变在Mozilla下的应用：

语法：  

 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

参数：其共有三个参数，第一个参数表示线性渐变的方向,top是从上到下，left是从作到右，若是定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还能够在它们之间插入更多的参数，表示多种颜色的渐变。如图所示：

根据上面的介绍，咱们先来看看一个简单的例子：

HTML:

<div class="example example1"></div>

CSS:

.example
{
     width: 150px;
     height: 80px;
}

如无特殊说明，咱们后面的实例都是应用这一段html和CSS的基本代码。

如今咱们给这个div应用一个简单的渐变样式：

.example
{
    background: -moz-linear-gradient( top,#ccc,#000);
}

效果以下：

---

线性渐变在Webkit下的应用

语法：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

上面这种CSS语法咱们常常见到，可能有人看不一样具体的意思，其实上面的一些符号含义与正则表达式有不少一致之处：

•  [] 在正则中表示一个字符类，这里，你能够理解为一个小单元

•  | 表示候选。也就是”或者”的意思，要么前面的，要么就后面的。

• ？为量词，表示0个或者1个

参数：-webkit-gradient是webkit引擎对渐变的实现参数，一共有五个。第一个参表示渐变类型(type),能够是linear（线性渐变）或者radial(径向渐变)。第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值能够用坐标形式表示，也能够用关键值表示，好比left top（左上角）和left bottom(左下角)。 第四个和第五个参数，分别是两个color-stop函数。 color-stop函数接收两个参数，第一个表示渐变的位置，0为起点，0.5为中点， 1为结束点；第二个表示该点的颜色。如图所示：

咱们先看看一个老式的写法示例：

background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

效果以下：

接着咱们在来看看一下新式的写法：

background:-webkit-linear-gradient(top,#ccc,#000);

这个效果就不在贴出来了，你们在浏览器中一看就明白了，他们是否一致的效果，仔细对比，在Mozilla和webkit下二者的学法都是基本上一致了。只是其前缀的区别，固然哪一天他们能统一成同样，对咱们俩说固然是更好了的，那就不用去处理了。将大大节省咱们的开发时间哟。其余内核的浏览器的写法在这里就再也不一一介绍，具体请看下面的连接：

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

CSS3径向渐变

CSS3径向渐变和线性渐变是很类似的，咱们首先来看看其语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了您已经在线性渐变中看到的起始位置，方向和颜色，径向梯度容许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角），包含和覆盖(closest-side, closest-corner,farthest-side, farthest-corner, contain or cover)。 颜色起止（Color stops）：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。下面为了更好的理解其具体的用法，咱们主要经过不一样的示例来对比CSS3径向渐变的具体用法：

示例一：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果：

示例二：

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

效果：

从以上两个示例的代码中发现，他们起止色相同，可是就是示例定位了些数据，为何会形成这么大的区别呢？其实在径向渐变中虽然具备相同的起止色，可是在没有设置位置时，其默认颜色为均匀间隔，这一点和咱们前面的线性渐变是同样的，可是设置了渐变位置就会按照渐变位置去渐变，这就是咱们示例一和示例二的区别之处，虽然圆具备相同的起止颜色，但在示例一为默认的颜色间隔均匀的渐变，而示例二颜色都有特定的位置。

示例三

background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

效果：

示例四

background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

效果

示例三和示例四咱们从效果中就能够看出，其形状就不同，示例三圆形而示例四椭圆形，也就是说他们存在形状上的差别。然而咱们再回到两个示例的代码中，显然在示例三中设置其形状为circle,而在示例四是elipse, 换而言之在径向渐变中，咱们是能够设置其形状的。

还有一些比较详细的用法，在此再也不详细讲述，详情请参考下面连接：

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html