CSS背景色渐变

从上到下渐变：background: linear-gradient(red, pink);

  

从左到右渐变：background: linear-gradient(to right, red , pink);

 

对角（从左上角到右下角）渐变：background: linear-gradient(to bottom right, red , pink);

background: linear-gradient(red 50%,#fff 90%); 

带有多个颜色结点的从上到下的线性渐变：background:linear-gradient(red,green,blue,yellow.....颜色);

 

 

创建一个带有彩虹颜色和文本的线性渐变：background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);

背景透明度设置：background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，
0表示透明度为100%，1表示透明度为0%。

径向渐变：
background: radial-gradient(red, green, blue); //默认椭圆向外渐变

background: radial-gradient(circle, red, yellow, green);//圆形向外部渐变

重复径向渐变：
background: repeating-radial-gradient(red, yellow 10%, pink 15%);