css渐变

1、linear-gradient 线性渐变

background-image: linear-gradient(direction, colorOne, colorTwo, ...);

direction：角度或者方向，90deg或to left这种，如下例子

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

2、radial-gradient径向渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape：圆类型：ellipse（椭圆）、circle（圆）

size：渐变的大小：farthest-corner (默认) 、closest-side 、closest-corner 、farthest-side

position：位置：to、center、bottom

background-image: radial-gradient(circle closest-side at 60% 55%,red 5%, green 15%, blue 60%);

3、repatiing-linear-gradient重复渐变背景

background: repeating-linear-gradient(angle | to side-or-corner,colorOnw, colorTwo, ...);

例：

background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);

4、repeating-radial-gradient重复径向渐变

background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color);

例：

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);