CSS3渐变

CSS3渐变(gradient)类型：

• 线性渐变( linear-gradients)：从上到下(默认情况)，也可以从左向右开始渐变。
• 径向渐变( radial-gradients)：按照椭圆(默认情况)(ellipse)，或者圆(circle)的方式从中心开始渐变，类似于水波的涟漪效果。

渐变使用方式和效果展示：

1、不重复的线性渐变(linear-gradient)

• background：linear-gradient(red,blue);
  =》默认情况下的从上到下开始渐变
  =》起点是红色，慢慢过渡到蓝色
  
• background：linear-gradient(to right,red,blue);
  =》从左到右开始渐变，方向为向右(to right)
  =》起点是红色，慢慢过渡到蓝色
  
  2、重复的线性渐变(repeating-linear-gradient)
• background:reapting-linear-gradient(red,yellow 10%,green 20%)

3、径向渐变
=》颜色均匀分布的渐变
=》background：radial-gradient(red,yellow,green);

=》颜色节点不均匀分布的渐变：
=》background: radial-gradient(red 5%, yellow 15%, green 70%);

=》渐变形状设置：
=》background: radial-gradient(circle, red, yellow, green);

总结：径向渐变和重复的线性渐变中，当颜色没有设置百分比时，是默认均匀分布的。当设置了百分比时，百分比值的和不是一定要等于100%。