Style-Gradient color

Text and background gradient color

The linear-gradient() function creates an image that represents a linear gradient between two or more colors. Gradient effects in different directions (specified as an angle) can be achieved. If the direction is not specified, the gradient will default from top to bottom .

0deg can be understood as a vertical upward arrow, the gradient effect is from bottom to top; 90deg is rotated 90 clockwise, and the gradient is from the left to the right. And so on 180deg, 360deg, -90deg...

/* 从上到下,蓝色渐变到红色 */
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);

Guess you like

Origin blog.csdn.net/ANNENBERG/article/details/128828964