渐变

了解

渐变：可以显示两种或多种指定颜色之间的平滑过渡。

渐变类型：

线性渐变（向下/向上/向左/向右/对角线）

语法：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 为中心。

1. 设置形状

   shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

   background-image: radial-gradient(circle, pink, skyblue,yellow);
   

2. 使用大小不同的关键字

   size 参数定义渐变的大小。它可接受四个值：

   • closest-side
   • farthest-side
   • closest-corner
   • farthest-corner

属性名	描述及取值
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

标签：gradient,渐变,color,圆心,background,径向
来源： https://www.cnblogs.com/yyshow/p/16141842.html