渐变为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 );
参数:变化的形状,起始的颜色和变化,终止颜色。