渐变
了解
渐变：可以显示两种或多种指定颜色之间的平滑过渡。
渐变类型：
线性渐变（向下/向上/向左/向右/对角线）
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
方向： 1.to + 方位名词 left right top bottom（to 终点位置属性）
? 2.度数deg：可以理解为颜色从原点到度数的方向过渡
background-image: linear-gradient(to right , red, green);
background-image: linear-gradient(to top right , red, green);
background-image: linear-gradient(45deg , red, rgba(83, 132, 83, .5));
径向渐变（由其中心定义）
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
? 默认地，shape 为椭圆形，size 为最远角，position 为中心。
background-image: radial-gradient(circle, pink, skyblue,yellow);
| 属性名 | 描述及取值 |
|---|---|
| shape | 确定圆的类型： ellipse（默认）：指定椭圆形的径向渐变 cricle：指定圆形的径向渐变 |
| size | 定义渐变的大小，可能值： farthest-conner（默认）：指定径向渐变的半径长度为从圆心到离心最远的角 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| position | 定义渐变的位置，可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。 |
| start-color, …, last-color | 用于指定渐变的起止颜色。 |
表格原文链接：https://blog.csdn.net/weixin_44296929/article/details/103031616