CSS3渐变色与过渡效果
CSS渐变色介绍线性渐变语法线性渐变线性渐变 - 对角线性渐变-角度值单位（deg）可以设置多个颜色渐变使用透明度（transparent）颜色用rgab()重复的线性渐变CSS3 径向渐变CSS3 径向渐变说明。语法径向渐变 - 颜色节点均匀分布（默认情况下）设置形状不同尺寸大小关键字的使用过渡transitionCSS渐变色介绍
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向。
径向渐变（Radial Gradients）- 由它们的中心向四周发散。
线性渐变
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
线性渐变 - 从上到下（默认情况下）。 从上到下的线性渐变，起点是红色，慢慢过渡到黄色：
<style>#grad {width: 200px;height: 200px;/* 默认从上到下 */background-image: linear-gradient(#e66465, #9198e5);}</style><div id="grad"></div>
线性渐变
to top 从左到右
to bottom 从上到下
to left 从右到左
to right 从左到右
background-image: linear-gradient(to top, #e66465, #9198e5);
线性渐变 - 对角
从左上角到右下角的线性渐变：
#grad {height: 200px;background-image: linear-gradient(to bottom right, red, yellow);}
线性渐变-角度值单位（deg）
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟</title> <style>#grad1 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(0deg, red, yellow); }#grad2 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(90deg, red, yellow); }#grad3 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(180deg, red, yellow); }#grad4 {height: 100px;background-color: red; /* 浏览器不支持的时候显示 */background-image: linear-gradient(-90deg, red, yellow); }</style></head><body><h3>线性渐变 - 使用不同的角度</h3><div id="grad1" style="text-align:center;">0deg</div><br><div id="grad2" style="text-align:center;">90deg</div><br><div id="grad3" style="text-align:center;">180deg</div><br><div id="grad4" style="text-align:center;">-90deg</div><p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p></body></html>
可以设置多个颜色渐变
#grad {background-image: linear-gradient(red, yellow, green);}
使用透明度（transparent）颜色用rgab()
rgba最后一个值代表透明度，默认为1.最小为0.不透明。
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}
重复的线性渐变
repeating-linear-gradient()函数用于重复线性渐变：
实例
一个重复的线性渐变：可以写多个颜色
#grad {/* 标准的语法 */background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
CSS3 径向渐变
CSS3 径向渐变说明。
指定一个点像四周发散，有点像在水中扔一个小石头，小石头激起的波浪。
语法
渐变的中心、形状（圆形或椭圆形）、大小。
默认情况下，渐变的中心是 center（表示在中心点）。
渐变的形状是 ellipse（表示椭圆形）。
渐变的大小是 farthest-corner（父盒子大小）。
background-image: radial-gradient( shape size at position, start-color, …, last-color);
径向渐变 - 颜色节点均匀分布（默认情况下）
#grad {background-image: radial-gradient(red, yellow, green);}
径向渐变 - 颜色节点不均匀分布
#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
#grad {background-image: radial-gradient(circle, red, yellow, green);}
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值：
closest-side
farthest-side
closest-corner
farthest-corner
过渡transition
过度简写属性 一般顺序过渡属性、过渡时间、过渡曲线、延迟时间
过渡属性如下
1 width宽度，高度height，all,等等。
2过渡时间 秒
3过渡曲线，
transition-property:指定过渡的属性。 all为指定所有属性都有过渡效果。 必须
transition-duration: 过渡的时间，单位可以是s或者ms。 必须
transition-delay:指定过渡生效的延迟时间。
transition-timing-function:
ease 慢慢减速linear 匀速ease-in 加速ease-out 减速ease-in-out 先加速后减速过渡属性 完成时间 运动曲线 延迟时间transition：all 3s linear 1s;一般有数值/中间状态的属性才可以设置过渡，比如：width，height
