radial-gradient中circle和ellipse决定渐变基础轮廓：ellipse默认拉伸，circle强制等距过渡；at关键字精确定位圆心，尺寸参数（如closest-side）控制扩散范围，色标位置调节过渡节奏。
radial-gradient 中的 circle 和 ellipse 怎么影响颜色过渡形状
形状决定渐变“扩散”的基础轮廓，不是可有可无的修饰项。默认是 ellipse（椭圆），在宽高不等的容器里会拉伸；设为 circle 才能保证从中心向等距边缘均匀过渡。
关键点在于：即使你写了 circle，如果没显式指定尺寸（比如 at center 或具体半径），浏览器仍可能按容器比例推算，导致实际过渡区域偏移或缩放异常。
-
radial-gradient(circle, red, blue)：强制圆形，但半径由浏览器自动计算（通常是到最远角的距离） -
radial-gradient(circle at 50% 50%, red, blue)：明确中心点，更可控 -
radial-gradient(ellipse at left top, red, blue)：从左上角开始拉出椭圆过渡，过渡方向感明显增强
如何用 at 关键字精确定位渐变中心
at 后面跟的是渐变“起始点”，也就是颜色最浓的位置。它不改变过渡范围大小，只移动起点——这点常被误认为是“移动整个渐变图案”，其实只是挪了圆心。
常见错误是写成 at 20px 30px 却忘了容器本身有 padding 或 border，结果视觉中心偏移。建议统一用百分比（如 at 30% 40%）或结合 calc() 动态计算。
立即学习“前端免费学习笔记（深入）”；
-
at center等价于at 50% 50%，安全且语义清晰 -
at 20% 80%表示中心落在距左 20%、距顶 80% 的位置，适合做底部亮光效果 -
at left 10px bottom 20px是合法语法，表示“从左边偏移 10px、底部偏移 20px 的位置”作为圆心
radial-gradient 的尺寸参数（closest-side 等）怎么控制过渡范围
尺寸参数决定“渐变从中心扩散到哪为止”，直接控制颜色过渡的**长度**和**缓急感**。它不是 CSS 长度单位，而是关键词，含义依赖于容器尺寸和 at 位置。
例如 closest-side 指到最近的边（上/下/左/右）的距离；而 farthest-corner 指到最远角的距离。同一组颜色，在不同尺寸参数下，过渡带宽可能差 2 倍以上。
-
closest-side：过渡紧凑，适合小图标内发光 -
farthest-side：过渡舒展，适合大背景柔化 -
100px（显式长度）：完全自控，但注意在响应式布局中可能失效 - 省略尺寸参数时，默认是
farthest-corner，容易在窄屏上过渡过猛
颜色停止点（color stop）怎么配合尺寸参数调节过渡节奏
仅靠尺寸参数只能控制“总长度”，真正决定颜色怎么变、在哪变快变慢的，是颜色停止点的位置。它和尺寸参数共同构成过渡曲线的“锚点”。
典型陷阱：写 radial-gradient(circle, #fff, #000) 看起来很平滑，但其实是默认把两个色标分别放在 0% 和 100%，中间线性插值。一旦加了第三个色标却没给位置，浏览器会自动均分，往往不符合预期。
radial-gradient( circle at center, #fff 0%, #ffcc00 60%, #ff3300 100% )
- 每个
<color><length></length></color>都是显式锚点，推荐全写，避免隐式分配 - 用
%基于当前尺寸参数算出的“总半径”来定位，不是基于容器宽高 - 两个相邻色标距离越近，那段过渡越陡峭；重叠（如
#f00 50%, #00f 50%）会产生硬切
at 一起用时，closest-side 这类关键词的“最近边”是相对于新圆心计算的，不是容器左上角。调效果前先确认圆心在哪，再看它离哪条边最近——否则改半天参数也不知为何不生效。 
