样式-渐变色

文字和背景渐变色

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。可以实现不同方向(指定为一个角度)的渐变效果,如果不指定方向,默认从上到下渐变。

0deg可以理解为一个垂直向上的箭头,渐变效果从底部到顶部;90deg顺时针旋转90,渐变从左侧指向右侧.以此类推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);

猜你喜欢

转载自blog.csdn.net/ANNENBERG/article/details/128828964