CSS径向渐变用radial-gradient()实现，至少需两个颜色，可指定形状（circle/ellipse）、尺寸（如farthest-corner）和位置（at x y），支持多色与色标控制，现代浏览器均兼容。
要用 CSS 实现径向渐变效果，直接使用 radial-gradient() 函数即可。它比线性渐变更灵活，能模拟光照、聚焦、球面等视觉效果。
基础语法和必填参数
radial-gradient() 至少需要两个颜色值，浏览器会自动按圆形、从中心向外扩散的方式渲染。最简写法：
这表示从中心开始由红变蓝的圆形渐变。默认形状是椭圆（ellipse），默认尺寸是 farthest-corner（到最近角的距离为半径终点）。
控制形状和大小
可通过关键字或长度值明确指定渐变的形状与范围：
立即学习“前端免费学习笔记（深入）”；
-
形状：用
circle（正圆）或ellipse（椭圆），如radial-gradient(circle, red, blue) -
尺寸：常用
closest-side（到最近边）、farthest-side、closest-corner、farthest-corner -
位置：加
at x y指定圆心，例如radial-gradient(circle at 20% 30%, #fff, #000)
多色与色标控制
像线性渐变一样，可以插入多个颜色，并指定具体位置（百分比或长度）：
background: radial-gradient(circle at center, #ff9a9e 0%, #fad0c4 100%);也可以让某段颜色“悬停”，制造高光或过渡带：
background: radial-gradient(circle at 30% 30%, #fff 0%, #fff 20%, transparent 20%, transparent 100%);这样就在左上区域做出一个白色高光圆斑。
兼容性与实用建议
现代浏览器（Chrome 10+、Firefox 16+、Safari 5.1+、Edge 12+）都支持标准写法，无需前缀。注意两点：
- 不要遗漏括号内的至少两个颜色，否则声明无效
- 若背景需透明底色，确保最后一个颜色含 alpha（如
rgba(0,0,0,0)）或用transparent - 可配合
background-size和background-position微调重复渐变图案
