css3 Gradient渐变效果

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

虽然CSS3的渐变属性在众浏览器中得到较好的支持，但在实际使用的时候也像制作软件（Photoshop CS6、Firework CS6等）的渐变工具一样，将渐变分成了几种：线性渐变（Linear
Gradients），径向渐变（Radial Gradients）、重复线性渐变和重复径向渐变。

国外一个根据gradients生产的多种渐变图案

http://lea.verou.me/css3patterns/

一、线性渐变语法与参数

 W3C标准线性渐变语法与属性参数

<span style="font-size:14px;">linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)	</span>

W3C标准线性渐变属性参数

W3C标准线性渐性语法包括三个主要属性参数：第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。在决定渐变的方向主要有两种方法：

 <angle>：通过角度来确定渐变的方向。0度表示渐变方向从下向上，90度表示渐变方向从左向右。如果取值为下值，其角度按顺时针方向旋转。

 关键词：通过关键词来确定渐变的方向。比如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为“0deg”、“90deg”、“180deg”和“270deg”。除了使用“to top”、“top left”之外，还可以使用“top left”左上角到右下角、“top right”左上角到右下解等。



 第二个和第三个参数，表示颜色的起始点和结束点。大家可以在从中插入更多的颜色值。

一个渐变可以包含多个色标，位置值为0~1之间的小数，或者0~100%之间的百分数，指定色标的位置比例

二、径向渐变语法与参数

W3C标准径向渐变语法

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);

属性	作用	参数
shap	渐变形状	ellipse(椭圆渐变)     circle（圆形渐变）
size	渐变尺寸	closest-side：渐变半径最近的边；  closest-corner：渐变半径最近的角；  farthest-side：渐变半径最远的边；  farthest-corner：渐变半径最远的角； 主要半径 次要半径（水平半径  垂直半径）【可以为数值或者百分比】
position	渐变原点，即渐变圆心位置	关键字 长度 百分比

径向渐变的属性参数

<position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：

 <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
 <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
 left：设置左边为径向渐变圆心的横坐标值。
 center：设置中间为径向渐变圆心的横坐标值或纵坐标。
 right：设置右边为径向渐变圆心的横坐标值。
 top：设置顶部为径向渐变圆心的纵标值。
 bottom：设置底部为径向渐变圆心的纵标值。


<shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：

 circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
 ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

<size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：
 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
 closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
 farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
 farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

如果<shape>设置了为“circle”或者省略，<size>可能显式设置为<length>。表示的是用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直径来确定径向渐变的形状是圆或者是椭圆。此值不不能负值。

主要半径 次要半径（主要半径即水平半径，次要半径为垂直半径）

如果<shape>设置了“ellipse”或者省略，<size>可能显式设置为［<length>|<percentage>］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。这两个值除了使用<length>定义大小之外还可以使用<percentage>来定义这两半径大小。使用<percentage>定义值是相对于径向渐变容器的尺寸。同样不能为负值。

<color-stop>：径向渐变线上的停止颜色，类似于线性渐变的<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

三、重复渐变

重复线性渐变
重复径向渐变