由
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)。
