css3 渐变

6 CSS3渐变
渐变为CSS3的新增属性，分为两种：线性渐变，径向渐变。
1、线性渐变：
Gradient：变化率，梯度变化曲线
1）、-webkit-gradient（原始方法，参数多难写，但是参数多容易调整，就是老师说的拖拉机）
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
参数分别代表：linear：线性 后面两对百分数代表起始位置和终止位置。from（起始的颜色） to(渐变后的色)，既from里的颜色向to里面的色过渡。
可以用这个做数值渐变，调整参数。
2）、linear-gradient（小轿车）竖直渐变。
   background: linear-gradient(red, blue); /* 标准的语法 */
参数只有起始颜色和终止颜色。
background: linear-gradient(red, blue,yellow);
也可以多个颜色。
background: linear-gradient(red 50%, blue); /* 标准的语法 */
颜色后面加个百分数可以控制在哪个地方开始渐变
3）、水平渐变（方向为水平）
background: -webkit- linear-gradient(left ，red，yellow)
参数三个，分别是方向、起始颜色和终止颜色。
4）、已角度为方向渐变
方向也可以是角度
background: -webkit -linear-gradient(15deg, red, blue);


2、径向渐变：
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。
语法：
radial-gradient
radial:径向的; 辐射状的; 放射式的。
background: radial-gradient(red, green, blue); /* 标准的语法 */
不均匀渐变
  background: radial-gradient(red 5%, green 45%, blue 5%);
形状变化（还有椭圆形ellipse）
background: radial-gradient(circle, red, yellow, green);
实验椭圆的时候记得长和宽不要设置一样
重复变化
background: repeating-radial-gradient(red, yellow 10%, green 15%);