CSS背景渐变

一.线性渐变 linear-gradient

1.从上到下的线性渐变

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

2.从左到右的线性渐变

.grad {
    background-image: linear-gradient(to right, red , yellow);
}

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

.grad {
    height: 200px;
    background-image: linear-gradient(to bottom right, red , yellow);
}

3.线性渐变指定一个角度

.grad {
    background-image: linear-gradient(180deg, red, yellow);
}

4.多个颜色

.grad {
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

5.渐变透明度

.grad {
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

二.径向渐变 Radial Gradients

1.颜色结点均匀分布（默认情况）

#grad {
    background-image: radial-gradient(red, yellow, green);
}

2.颜色结点不均匀分布

#grad {
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

3.形状渐变

#grad {   //圆形
    background-image: radial-gradient(circle, red, yellow, green);
}

#grad {   //椭圆形
    background-image: radial-gradient(ellipse, red, yellow, green);
}

。。。。。。