6CSS3渐变

渐变为css3新增属性，分为两种：线性渐变和径向渐变

1）-webkit-gradient参数多，但是容易调整（）

background: -webkit-gradient(linear,0% 0%,100% 0%,from(red),to(yellow));

参数：linear：线性，后面的两组参数代表的是起始和终止的位置from（起始）

to（终止）的颜色                                

2.linear-gradient

background: linear-gradient(yellow,blue);

参数只有起始颜色和终止颜色

background: linear-gradient(white,deepskyblue,dodgerblue,mediumblue);

在颜色后面加上百分数可以控制颜色开始渐变的位置

background: linear-gradient(#74fff7 50%,mediumblue);

2.水平渐变（方向为水平方向）

background: -webkit-linear-gradient(left,red,yellow);

参数为方向，起始颜色，终止颜色

3.以角度方向进行渐变

background: -webkit-linear-gradient(45deg,deepskyblue, #1429ff);

参数为角度，起始颜色，终止颜色

径向渐变：

css3径向渐变就是圆形或者椭圆形不沿着一条线进行变化，而是从一个起点朝着所有方向进行渐变，相当于线性渐变，径向渐变要复杂

1.标准语法

background: radial-gradient(#71b9fe , blue);

不均匀变化

background: radial-gradient(pink 30% , yellow 80%);

参数：在颜色的后面加上百分数可以控制渐变的程度

4.形状变化

background: radial-gradient(ellipse, #b0ff94 ,green );

参数：变化的形状，起始的颜色和变化，终止颜色。