渐变（Gradients）

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

注意点：给背景图片设置

background-image: linear-gradient(red, green); //从上到下，从红渐变绿

background-image: linear-gradient(to right,red, green); //从左到右，从红渐变绿

background-image: linear-gradient(to bottom right, red, yellow);//从左上角到右下角

background-image: linear-gradient(-90deg, red, yellow); //带有指定的角度的线性渐变：0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

background-image: linear-gradient(to right, red,orange,yellow,green,blue);//从左到右，使用多个颜色节点

线性渐变 - 透明度

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(0,0,0,1));//从左到右，透明渐变不透明

重复的线性渐变

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);//从上到下

具体的线性渐变

background-image: linear-gradient(red 33.33%, yellow 33.33%, ,yellow 66.66%, green 66.66%);//让颜色有具体感

径向渐变

background-image: radial-gradient(red, yellow, green); //由里到外渐变

background-image: radial-gradient(red 5%, yellow 15%, green 60%);//颜色节点不均匀分布

background-image: radial-gradient(circle, red, yellow, green);//设置形状，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

不同尺寸大小关键字的使用

size指定了渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

重复的径向渐变

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

方向的径向渐变

background-image: radial-gradient(bottom left / 40% 20% , red, yellow 10%, green 15%);