W3C 与 2010年11月份 正式支持渐变背景样式，背景图像源可以定义为渐变背景
渐变背景包括 线性渐变和 径向渐变俩种类型
1.线性渐变
创建一个线性渐变 只需要两个颜色 ，也可以选择设置一个起点或一个方向，用法：
linear-gradient (angle , color-stop1 , color-stop2 , …)
angle : 渐变方向 取值为角度或者关键字。关键字包括一下4个：
| 关键字 | 作用 |
|---|---|
| to left： | 设置渐变从右到左，相当于270deg。 |
| to right： | 设置渐变从左到右，相当于90deg。 |
| to top： | 设置渐变从下到上，相当于0deg。 |
| to bottom： | 设置渐变从上到下，相当于180deg。该值为默认值。 |
DEG PS：在CSS中角度单位有：度(deg)、梯度(grad)\弧度(rad)。无论如何声明，这些值都会解释为0~360范围内的度数。如：-90deg=270deg。
例：如果创建对角渐变线，可以使用to top left（从右下到左上）、
color-stop：指定渐变的色点
实例设计：
本例使用 linear-gradient （）函数为页面设计渐变网页背景演示如下：
代码如下：
1.重复线性渐变
知识点：使用 repearing-linear-gradient（）函数可以定义 重复线性，用法与 linaer-gradient（）函数相同。
注意：使用重复线性渐变的关键是要定义好色点，让最后一个颜色和第一个颜色能够很好的连接起来，处理不当将导致颜色的急剧变化。
实例设计：
代码如下：
????径向 渐变
创建一个径向渐变，至少定义两个颜色，同时可以指定渐变的中心点位置、形状类型（圆形或椭圆形）
radial-gradient（）用法如下：
shape：用来指定渐变的类型，包括circle（圆形）和 ellipse（椭圆形）两种。
size： 如果类型为 circle 指定一个值设置⚪圆形的半径；如果类型为 ellipse 指定两个值分别设置椭圆的x和
y轴半径。取值包括长度值，百分比，关键字说明如下：
☁closet -side： 指定径向渐变的半径长度为从中心点到最近的边。
☁closet -corner： 指定径向渐变的半径长度为从中心点到最近的角。
⚡farthest -side： 指定径向渐变的半径长度为从中心点到最远的角。
⚡farthest-corner： 指定径向渐变的半径长度为从中心点到最远的角。
????position：用来指定中心点，如果提供两个参数，第一个表示x，第二个表示y，
如果提供一个参数，第二个值默认 50%， 即最终会被转换为具体的长度。
实例设计：
本例使用 CSS3 径向渐变制作圆形球体，主要利用多重背景进行设计，然后使用径向渐变叠加设计球体和发光的光晕效果。
重复 径向 渐变
知识点：使用 repeating-radial-gradient() 函数
可以定义重复线性渐变，用法同上。
实例设计：
下面实例设计三色重复显示径向渐变，效果如下：
温馨提示：不要久盯此图
代码如下：
完结！！！
作者：在校生记录博客
出处：这里。。。。
只供学习交流！