使用radial-gradient()可创建圆形或椭圆的径向渐变，语法为radial-gradient([shape size] at position, start-color, ..., end-color)；2. shape定义形状如circle或ellipse，size控制渐变范围如closest-side或farthest-corner，position设置中心点如top left；3. 颜色值按顺序定义渐变节点，支持多色过渡；4. 示例包括从中心蓝到白的圆形渐变、中心移至左上角的红黄绿三色渐变，以及基于容器边距响应的closest-side效果；5. 灵活组合参数可实现突出焦点或柔和背景的视觉设计。

使用CSS的radial-gradient()函数可以轻松创建径向渐变效果，也就是从一个中心点向外扩散的渐变。它支持圆形和椭圆形状，适合用于背景、按钮、卡片等视觉设计。

基本语法结构

radial-gradient()的基本写法如下：

radial-gradient([shape size] at position, start-color, ..., end-color)

• shape：定义渐变的形状，可选 circle（圆形）或 ellipse（椭圆）
• size：控制渐变的大小，如 closest-side、farthest-corner 等
• position：设置渐变中心位置，默认是 center
• 颜色值：按顺序定义渐变的颜色节点

创建简单的圆形渐变

下面是一个从中心开始，由蓝色过渡到白色的圆形渐变：

background: radial-gradient(circle, blue, white);

这个例子中，circle 明确指定为圆形，浏览器会从中心点均匀向外扩散颜色。

Comet AI 浏览器

下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。

下载

调整渐变中心与颜色节点

你可以改变渐变的起始位置和添加多个颜色：

background: radial-gradient(circle at top left, red, yellow 50%, green);

• 渐变中心移到左上角
• 红色开始，黄色在50%位置，绿色结束
• 适用于需要强调某一区域的设计

控制渐变范围大小

使用关键词控制渐变的覆盖范围：

background: radial-gradient(circle closest-side, #ff9a9e, #fad0c4);

• closest-side：渐变在碰到最近的边时结束
• farthest-corner：延伸到最远的角落
• 适合不同容器尺寸下的响应式设计

基本上就这些。掌握 radial-gradient 的参数组合，就能灵活做出柔和的背景或突出焦点的视觉效果，不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！