• 线性渐变

/*
 * background-image: linear-gradient( 方向/角度 , 颜色1，颜色2，颜色3....);
 * 方向： 在关键字 to 后面加上 top、bottom、right、left 中的某一个关键字或多个关键字
 * 角度：除了使用关键字to +方向名词外，我们还可以使用角度去任意的规定
 */
// 从上到下（默认）
background-image: linear-gradient(#FF0000,#FFF200, #1E9600);
// 从下到上
background-image: linear-gradient(to top, #FF0000,#FFF200, #1E9600);
// 从左到右
background-image: linear-gradient(to right, #FF0000,#FFF200, #1E9600);
// 从左上到右下
background-image: linear-gradient(to right bottom , #FF0000,#FFF200, #1E9600);
// 使用角度：45°
background-image: linear-gradient(45deg, #FF0000,#FFF200, #1E9600);
// 颜色还可以使用rgb模式，这样就可以使用透明度了
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
// 重复线性渐变
background-image: repeating-linear-gradient(45deg, #F27121 20px, #E94057 30px, #8A2387 40px);

• 径向渐变

/*
 * background-image: radial-gradient(shape size at position, start-color, ..., last-color);
 * shape： 定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）
 * size：渐变的大小，它可接受四个值：closest-side、farthest-side、closest-corner、farthest-corner
 * at position：用关键字 at 后面加上 position 属性支持的定位关键字和数值，指定渐变中心的位置
 */
// 均匀间隔的色标（默认）
background-image: radial-gradient(#d63c21, #e0d865);
// 圆形渐变
background-image: radial-gradient(circle, red, yellow, green);
// at position：指定渐变中心的位置
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
// 平铺的径向渐变
background-image: repeating-radial-gradient(circle at 20% 40%,#eea2a2 20px, #57c6e1 20px, #b49fda 40px, #7ac5d8 40px, #b49fda 60px, #4F9C9C 60px, #57c6e1 80px, #99CCCC 80px, #eea2a2 100px);