css3的渐变分为:
- 线性渐变,在分为重复线性渐变;
- 径向渐变,再分为圆形径向渐变,椭圆形径向渐变,重复径向渐变
(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>