radial-gradient() 默认不是从中心均匀发散的圆，而是ellipse farthest-corner at center，易致拉伸、偏移或截断；推荐显式写为radial-gradient(circle at center, #ff9a9e, #fad0c4)确保稳定。
radial-gradient() 默认不是“从元素中心均匀发散的圆”，它会根据容器宽高比和隐式参数自动适配，结果常是椭圆偏移、边缘截断或中心漂移。
radial-gradient(circle at center) 是最稳的起点
省略参数时，radial-gradient(red, blue) 实际等价于 radial-gradient(ellipse farthest-corner at center, red, blue)——ellipse 在非正方形容器里必然拉伸，farthest-corner 在窄高容器中会让渐变撑到右下角，视觉上像被拽歪了。
显式写死关键控制点能立刻规避多数意外：
-
circle强制等宽高等径，避免拉伸变形 -
at center锚定物理中心，不受transform或direction: rtl干扰 - 组合起来：
radial-gradient(circle at center, #ff9a9e, #fad0c4)
farthest-corner 和 closest-side 的实际表现差异很大
这两个尺寸关键词在不同容器中行为不一致，不能凭字面意思乱换。
-
farthest-corner：终点落在离中心最远的角。全屏背景用它最饱满，兼容性也最好（IE10+ 支持） -
closest-side：终点停在离中心最近的那条边。适合按钮悬停光晕，但若容器高度只有 24px，整个渐变可能缩成一个色点 - 实测建议：
farthest-corner用于大范围背景；closest-side用于小控件，且务必配合padding留出呼吸空间
颜色停止点必须带单位，否则浏览器按百分比硬猜
radial-gradient(red 10%, yellow 50%, green) 看似合理，但最后一个颜色没单位，浏览器会把它当作 green 100% 处理，中间过渡可能突兀。
- 所有停止点都建议显式标注单位：
red 0%, yellow 50%, green 100% - 想让某段颜色更“硬”？用重复值：
red 40%, red 41%, yellow 99% - 透明叠加要注意顺序：后写的渐变层在上，
rgba(0,0,0,0.2)叠在纯色上才有效果
多层径向渐变叠加时，透明通道和层序决定最终观感
单个 radial-gradient() 只能定义一种辐射源，要模拟真实光斑（比如中心亮+外圈柔光），得叠两层：
- 第一层：
radial-gradient(circle at center, white, transparent 70%)（中心白，70%处完全透明） - 第二层：
radial-gradient(circle at center, rgba(255,255,255,0.1), transparent)（更淡、扩散更广） - 两层用逗号拼接，注意顺序：前面的在下，后面的在上
- 别忘了加
background-size: cover或100% 100%防止重复平铺
closest-side 在 320px 宽手机屏上和在 1920px 宽显示器上，产生的“最近边”根本不是同一回事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
