css3 的各种渐变总结

css3的渐变分为：

1. 线性渐变，在分为重复线性渐变；
2. 径向渐变，再分为圆形径向渐变，椭圆形径向渐变，重复径向渐变
   （A.宽高相等就是圆形重复径向渐变）
   （B.宽高不相等就是椭圆形重复径向渐变）

// 
div{
    width:800px;
    height:400px;
    color:white;
}


.item1{
    background-image:linear-gradient(to right,red,green,blue,purple,black);
}
<div class="item1">
    1、线性渐变（最终达到位置，渐变颜色，渐变颜色，渐变颜色。。。）
</div>


.item2{
    background-image:repeating-linear-gradient(red, green 50px,blue 100px,purple 150px, black 200px);
}
<div class="item2">
    2、[重复]线性渐变（起点颜色，渐变颜色 开始时位置，渐变颜色 开始位置，渐变颜色 开始位置。。。）
</div>


.item3{
    background-image: radial-gradient(red,green,blue,purple,black)
}
<div class="item3">
     3、径向渐变（渐变颜色，渐变颜色，渐变颜色。。。）
</div>


.item4{
    background-image: radial-gradient(circle,red,green,blue,purple,black)
}
<div class="item4">
     4、[圆形]径向渐变（圆形，渐变颜色，渐变颜色，渐变颜色。。。）
</div>


.item5{
    background-image: radial-gradient(ellipse,red,green,blue,purple,black)
}
<div class="item5">
     5、[椭圆形]径向渐变（椭圆形，渐变颜色，渐变颜色，渐变颜色。。。）
</div>


.item6{
    background-image: repeating-radial-gradient(red,green 50px,blue 100px,purple 150px,black 200px)
}
<div class="item6">
     5、[重复]径向渐变（起点颜色，渐变颜色 开始位置，渐变颜色 开始位置，渐变颜色 开始位置。。。）
    宽高相等就是重复圆形径向渐变,宽高不相等就是重复椭圆形径向渐变
</div>