Css径向渐变 - radial-gradient

由background-image: radial-gradient(at 75% 7%, blue 0px, transparent 50%);引出：

一、径向渐变是什么

径向渐变是颜色从一个中心点向外扩散的变化过程。

二、radial-gradient 函数是什么

1、使用语法：

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

• shape：可选参数，定义渐变形状，可以是 circle（圆形）、ellipse（椭圆）或者 closest-side、farthest-side 等关键字。
• size：可选参数，指定了渐变的大小，可以是具体的长度（如 50px 或 50%），也可以是关键字如 closest-corner、farthest-corner 等。
• at position：可选参数，定义渐变的中心点位置，可以是具体的坐标（如 center center 或 left 50% top 50%）。
• start-color 和 end-color：必需参数，分别表示渐变的起始颜色和结束颜色，同样可以附加位置来精确控制渐变过渡点。

2、at [position] 这一语法用于指定径向渐变的中心位置。

• at 之后的position为径向渐变的中心位置，而形成的渐变图形的长宽与50% 50%时的长高差不多，所以会看起来造成一定的椭圆形状大小变化

<div style="display:flex">
  <div class="box center-gradient"></div>
  <div class="box corner-gradient"></div>
</div>

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}
.center-gradient {
  background-image: radial-gradient(
    at 50% 50%,
    rgb(240, 148, 254) 0px,
    transparent 50%
  );
}
.corner-gradient {
  background-image: radial-gradient(
    at 95% 5%,
    rgb(244, 148, 148) 0px,
    transparent 50%
  );
}

3、颜色停止点-解释一下（rgb(240, 148, 254) 0px）

• 颜色停止点用于定义渐变过程中颜色的变化位置和具体颜色值。在 radial-gradient 函数中，你可以设置多个颜色停止点，渐变会从一个颜色停止点平滑过渡到下一个颜色停止点。
• 0px 表示这个颜色停止点的位置，它指定了从渐变中心开始的距离。在 radial-gradient 中，渐变是从中心向外扩散的，0px 就意味着这个颜色是从渐变的中心点开始的。也就是说，在渐变的最中心位置，显示的颜色就是 rgb(240, 148, 254)。