一个好看的网站，少不了花里胡哨的颜色，说起颜色，当然少不了渐变。下面我介绍文字渐变和背景渐变。
css渐变
线性渐变
旧版用法：gradient（渐变类型，起点x 起点y，终点x 终点y，起始颜色，终点颜色）。
实现简单渐变gradient一共有5参数：
1、渐变类型：可以是线性渐变linear或者径向渐变radial。
2、起始位置：可以是坐标如 (0 0)、(50% 0)，也可以是关键值如(left top)、(left bottom)
3、终点位置：可以是坐标如 (100% 100%)、(50% 100%)，也可以是关键值如(left top)、(left bottom)
4、起始颜色：是color-stop函数（色标），color-stop函数接受两个参数，第一个参数渐变的位置，0表示起点，0.5为中点,1为结束点；第二个参数该点的颜色。
5、终点颜色：是color-stop函数（色标），color-stop函数接受两个参数，第一个参数渐变的位置，0表示起点，0.5为中点,1为结束点；第二个参数该点的颜色。
下面我例举两例子：
background-image: gradient( linear,50% 0, 50% 100%, color-stop(0, #ccc), color-stop(1, #111) );
background-image: gradient( linear,left top, right bottom, color-stop(0, #ccc), color-stop(1, #111) );
新版用法：渐变类型-gradient(方向, 颜色, 颜色, . . .)
实现简单渐变gradient一共有3参数：
1、方向：取值为角度（如45deg）或方向关键字(top, bottom等)
2、颜色列表：第二个参数开始是一个颜色列表, 起始点到结束点之间渐变颜色;每个颜色可以加入百分比表示颜色开始位置
下面我例举三例子：
background-image: linear-gradient(to top, #ccc, #111); /*方向值为方向关键字*/
background-image: linear-gradient(45deg, #ccc, #111); /*方向值为角度值*/
background-image: linear-gradient( 0deg, #111, #ccc 40%, #111 );/*多个颜色, 颜色加入百分比*/
background-image: linear-gradient(to right, #ccc, #111 10%, #ccc 20%, #111 30%, #ccc 40%, #111 50%, #ccc 60%, #111 70%, #ccc 80%, #111 90%, red);
径向渐变
由于径向渐变较为复杂，就不再介绍旧版，直接介绍2013年04月开始给径向语法推出新的语法规则
用法：radial-gradient: (形状 大小 at 位置, 颜色, 颜色,…)
1、形状: 定义渐变的形状,可选参数, 取值为circle(圆)或ellipse(椭圆),如果不设置则根据元素容器的形状来确定。
2、大小: 定义渐变的大小，可选值，默认为径向渐变的半径长度为从圆心到离圆心最远的边。
如果渐变形状为圆形：取值为长度值（如，50px, 10em），此值不不能负值。
如果渐变形状为椭圆：取值为两个值， 第一个值代表水平半径，第二个值代表垂直半径。这两个值可使用长度值（如：50px,5em等）和“%”（如：10%,20%等）来定义这两半径大小。使用“%”定义值是相对于径向渐变容器的尺寸。同样不能为负值。
也可以是关键字：最近端(closest-side)，最近角(closest-corner)，最远端(farthest-side)，最远角(farthest-corner)，包含(contain)，覆盖(cover)。注意firefox目前只支持关键字
3、位置：定义径向渐变的圆心位置，用于确定元素渐变的中心位置。可选参数。也是用两个值表示，第一个代表横坐标，第二个代表纵坐标，值可使用长度值（如：50px,5em等）、“%”（如：10%,20%等）和方向关键字（top, bottom, right, left）。注意加上at关键字，不是用逗号隔开
4、颜色列表： 用法和线性渐变一样
下面我例举几个例子：
background-image: radial-gradient(#ccc, #111);
background-image: radial-gradient(circle, #ccc, #111);/* 指定形状为圆 */
background-image: radial-gradient(circle 50px, #ccc, #111);/* 指定圆的大小 */
background-image: radial-gradient(50px 25px, #ccc, #111);/* 指定椭圆的大小 */
background-image: radial-gradient(25% 25%, #ccc, #111);/* 用百分比指定椭圆的大小 */
background-image: radial-gradient(circle 50px at center top, #ccc, #111);/* 指定圆心的位置 */
background-image: radial-gradient(circle 50px at 50% 0% , #ccc, #111);/*用百分比 指定圆心的位置 */
background-image: radial-gradient(circle 50px at 100px 0px , #ccc, #111);/*用长度值 指定圆心的位置 */
使用gradient有非常重要的一点：
如果只是背景渐变直接使用即可。
如果需要文字渐变，文字颜色透明，再用上background-clip裁剪出字体。所以，一定要加上：
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
background-clip: text;
最后强调一下：如果要文字渐变一定不可少了上面css！