radial-gradient默认画椭圆而非正圆，因起始形状为ellipse且尺寸默认farthest-corner；要正圆须显式声明circle关键字，并搭配closest-side等尺寸参数。
radial-gradient 画圆时为什么不是正圆？
默认不是正圆，因为 radial-gradient 的起始形状是椭圆（ellipse），且默认尺寸是 farthest-corner——它会撑满整个容器对角线距离，导致在宽高不等的容器里看起来被拉伸了。
- 要正圆，必须显式声明
circle关键字：radial-gradient(circle, red, blue) - 尺寸参数影响范围：用
closest-side是到最近边的距离，farthest-side是到最远边，比farthest-corner更可控 - 没写尺寸时浏览器按规范自动选
farthest-corner，这是多数“变形”问题的根源
径向渐变的色标位置为什么总偏移？
色标（color stop）的位置值默认是相对于渐变中心的**百分比距离**，但这个“距离”是按椭圆/圆的半径算的，不是像素。如果用了 closest-side，100% 就真等于到最近边的距离；但如果用 farthest-corner，100% 就是斜边一半，数值就容易误判。
- 写绝对长度更直观：
radial-gradient(circle at center, #f00 0%, #00f 50px)，这里50px是从中心出发的真实像素半径 - 避免混用单位：不要
50% 80px这样交叉写，渲染行为未定义，Chrome 和 Safari 可能表现不同 - 中心点偏移（如
at 20% 30%）会改变所有色标参照系，调试时建议先固定at center
radial-gradient 在 flex 或 grid 容器里突然失效？
不是渐变失效，是父容器没给明确宽高，导致子元素的尺寸塌陷，而 radial-gradient 的尺寸计算依赖容器实际渲染尺寸。Flex/Grid 项若没设 min-width/min-height，又没内容撑开，就会变成 0×0。
- 加一句
min-width: 0; min-height: 0;到 flex/grid 子项，防止收缩归零 - 背景图容器若用
background-size: cover，和radial-gradient的尺寸参数冲突，优先级上 cover 会覆盖掉你写的circle at ...尺寸逻辑 - 用
background: radial-gradient(...) / 100% 100% no-repeat显式控制缩放，比依赖 cover 更可靠
IE11 兼容 radial-gradient 圆形过渡？
IE11 支持 radial-gradient，但只认旧语法：radial-gradient(center, circle, red, blue)，不支持新语法里的 at、尺寸关键字或空格分隔的色标写法。
立即学习“前端免费学习笔记（深入）”；
- 必须写成逗号分隔：
radial-gradient(center, circle, #f00, #00f)，不能写radial-gradient(circle at center, #f00, #00f) - IE11 不支持色标带单位（如
50px），只能用百分比或无单位数值（0.5） - 现代写法需双写：先写 IE11 兼容版，再覆盖一行标准语法，靠层叠生效
circle at center 看似合理，但缺了尺寸参数，浏览器仍按 farthest-corner 算，结果还是椭圆。得写全 circle closest-side at center 才真正可控。 
