渐变的几种形式

线性渐变的实例：

1.从上到下的线性渐变：

.box {

background: -webkit-linear-gradient(red, blue); 

background: -o-linear-gradient(red, blue);

background: -moz-linear-gradient(red, blue);

background: linear-gradient(red, blue); 

}

2.从左到右的线性渐变：

.box {

background: -webkit-linear-gradient(left, red , blue); 

background: -o-linear-gradient(right, red, blue); 

background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red , blue);

}

3.从左上角到右下角的线性渐变：

.box{

background: -webkit-linear-gradient(left top, red , blue); 

background: -o-linear-gradient(bottom right, red, blue); 

background: -moz-linear-gradient(bottom right, red, blue);

background: linear-gradient(to bottom right, red , blue); 

}

4.带有指定的角度的线性渐变：

.box{

background: -webkit-linear-gradient(180deg, red, blue);

background: -o-linear-gradient(180deg, red, blue);

background: -moz-linear-gradient(180deg, red, blue);

background: linear-gradient(180deg, red, blue);

}

5.带有多个颜色结点的从上到下的线性渐变：

/*横向颜色*/

.box { 

background: -webkit-linear-gradient(red, green, blue);

background: -o-linear-gradient(red, green, blue); 

background: -moz-linear-gradient(red, green, blue); 

background: linear-gradient(red, green, blue);

 }

/*竖向颜色*/

.box {

background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 

background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

}

/*重复的线性渐变*/

.box {

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

6.径向渐变:

.box {

background: -webkit-radial-gradient(red, green, blue); 

background: -o-radial-gradient(red, green, blue); 

background: -moz-radial-gradient(red, green, blue); 

background: radial-gradient(red, green, blue);

}

7. 边框渐变

.ele {
    width: 60vh;
    aspect-ratio: 12 / 6;
    border-radius: .5em;
    border: 2vh solid transparent;
    background: linear-gradient(45deg, orange, red) no-repeat center / cover;
    background-image: linear-gradient(#fff, #fff), linear-gradient(45deg, orange, red);
    background-origin:padding-box, border-box;
    background-clip:padding-box, border-box;
}