CSS3的渐变

通过第三周的逆战班的学习，总结了渐变的多种形式。

第一种，线性渐变
即呈现出来的感觉是一行一行的。

1. 第一种呈现形式
   百分比指的是一个位置而不是一块内容
   即橘色从10%这个位置突然变成粉色
   紧接着粉色到绿黄开始了一个10%这么大的渐变
   从20%这个位置到30%这个位置都是绿黄
   从30%这个位置突然变成黄色，接着循环。

background-image: repeating-linear-gradient(orange 10%  ,pink 20%, greenyellow 20%,
			greenyellow 30%,yellow 30% ,yellow 40%);}
			

2. 第二种呈现形式
指沿固定方向进行渐变
同理。px也指的是位置
若将to right top换成direction，则为默认自上至下的渐变。

background-image: repeating-linear-gradient(to right top,red 0px,red 10px,blue 10px,blue 20px)

第二种，径向渐变
即由一点向四周渐变。
我给父元素添加了属性后，会呈现这种八个格子的效果

.box{
				width: 100px;
				height: 200px;
				border: 2px solid powderblue;
				margin: 50px auto;
				background-size: 50px 50px;
				text-align: center;
				line-height: 200px;
				color: #B0E0E6;
				font-size: 12px;}

1.第一种呈现形式
由中心点的蓝色向外围黄色渐变。

background-image: radial-gradient(blue,orange);

2.第二种呈现形式
没有给出渐变范围，即10%是蓝色的30%是黄色的

 background-image: radial-gradient(blue 10%,orange 30%);

3.第三种呈现形式
利用透明度进行表示渐变

background-image: radial-gradient(rgba(255,0,0,1),rgba(255,255,0,0.5));

4.第四种呈现形式
中心点设为左上位置，以圆的形状进行渐变

background-image: -webkit-radial-gradient(left top , circle ,blue,orange);

5.第五种呈现形式
形状为圆形，范围是70px，中心点的地方开始由蓝向黄渐变。

background-image: radial-gradient(circle 70px at 50% 50%,blue,orange);

6.第六种呈现形式
百分比同样代表的是位置

background-image: repeating-radial-gradient(blue 0%,blue 10%,orange 10%,orange 20%,pink 20%);

呈现出来“八饼”的效果。