radial-gradient()默认参数导致“偏心”或“拉伸”是因为形状为ellipse、尺寸为farthest-corner、位置虽默认center center但易受transform或rtl影响；应显式写circle at center确保居中与等比，内嵌用closest-side，全屏用farthest-corner。
radial-gradient() 默认参数为什么总让渐变“偏心”或“拉伸”
直接写 radial-gradient(red, blue) 很容易出现中心不在视觉正中、边缘被横向/纵向拉长、甚至只显示半截色块的情况。这不是浏览器 bug，而是默认行为：形状是 ellipse（非正圆），尺寸是 farthest-corner（终点取离中心最远的角），位置虽为 center center，但会受父容器 transform、direction: rtl 或盒模型变化影响。
实操建议：
- 强制用
circle at center明确形状和锚点，避免响应式下中心漂移 - 若容器宽高比不固定（比如全屏背景），
farthest-corner确实更饱满；但做按钮、卡片内嵌效果时，它常导致渐变溢出或变形 - 遇到“渐变只在左上角一小块生效”，大概率是没声明
at center，且父元素有text-align: right或flex-direction: row-reverse干扰了计算起点
closest-side 和 farthest-side 在不同容器中的真实表现差异
这两个尺寸关键词不是“小一点”和“大一点”的简单区别，它们的终点由「中心到各边的距离」动态决定——这意味着在宽屏、窄高、正方形容器里，效果可能完全相反。
常见现象：
-
closest-side在一个 800×200 的横幅中，会让渐变水平方向铺满（因上下边更近），垂直方向却缩成窄带；但在一个 200×800 的侧边栏里，它反而只在顶部/底部显出细条，中间大片空白 -
farthest-side在正方形容器中接近circle效果；但在超宽容器中，它会把终点推到左右两侧，导致上下留白严重 - 真正稳定可控的全背景方案是
farthest-corner，它始终延伸到对角，视觉填充感强，兼容性也最好（IE10+ 支持）
多色停止点必须带单位，否则会意外失效
写 radial-gradient(red 5%, yellow 15%, green 60%) 没问题，但若漏掉百分号，比如 red 5 或 yellow 15px，部分浏览器（尤其是 Safari 旧版）会直接忽略该色标，导致后续颜色错位甚至整个渐变退化为单色。
关键细节：
- 所有带位置的色标都必须有单位：支持
%、px、em，但不能裸数字 - 第一个色标位置默认为
0%，最后一个默认为100%，但显式写出更安全（尤其涉及透明叠加时） - 用
rgba()配合位置控制渐变透明区域时，务必确认 alpha 值是否被正确解析——例如rgba(255,0,0,0) 30%是从 30% 开始完全透明，不是“30% 透明度”
repeating-radial-gradient() 容易忽略的平铺边界问题
repeating-radial-gradient() 不是简单复制原图，而是按「首个色标到末个色标距离」为周期重复。如果写 repeating-radial-gradient(circle, red, yellow 10%)，实际每个重复单元直径只有 10%，极易变成密密麻麻的小点，而非预期的同心环。
调试要点：
- 把末个色标设得足够远（如
yellow 50%），再靠background-size控制整体密度 - 重复渐变叠加时，
background-position对齐很关键——两个repeating-radial-gradient层叠，若没统一at center，会出现错位光晕 - 性能提示：大量使用
repeating-radial-gradient+ 小尺寸色标，在低端移动设备上可能触发重绘卡顿，建议用background-size: 200px 200px限制渲染范围
circle at center，都能省掉一半调试时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
