day13渐变2d

一、线性渐变

属性 background/background-image

属性值：linear-gradient(参数1，参数2，参数3,…)

用于创建一个表示两种或多种颜色线性渐变的图片。

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

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

二、径向渐变

属性：background/background-image

属性值：radial-gradient()

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

1shape:渐变的形状：ellipse 椭圆是默认值

​ cicle圆

2size:渐变的大小

• farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
• closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
• closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
• farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

3at position:渐变的起点

​ 定义渐变的位置。可能值：

• center（默认）：设置中间为径向渐变圆心的纵坐标值。
• top：设置顶部为径向渐变圆心的纵坐标值。
• bottom：设置底部为径向渐变圆心的纵坐标值。

​