CSS径向渐变怎么用？radial-gradient教程

CSS 的 `radial-gradient` 是一种强大而灵活的背景渐变工具，能轻松实现从中心点向外扩散的圆形或椭圆色彩过渡效果，适用于按钮、卡片、光晕、焦点提示等多种设计场景；它支持自定义形状（circle/ellipse）、精确位置控制（如 `at top left`）、智能尺寸关键词（如 `farthest-corner`）、多色停止点（如 `red 10%, yellow 50%`）以及多个渐变叠加，只需掌握基本语法和关键参数组合，就能快速创造出富有层次感与视觉吸引力的现代 UI 效果。

使用 CSS 的 radial-gradient 可以创建从一个中心点向外扩散的渐变效果。它非常适合用于背景、按钮、卡片等需要视觉层次感的设计元素。

基本语法

background: radial-gradient(形状或大小, 颜色停止点1, 颜色停止点2, ...);

最简单的形式只需要指定颜色，浏览器会自动计算中心位置和渐变类型。

<font face="Courier New">.box {
  background: radial-gradient(red, yellow, green);
}</font>

这个例子从中心开始，颜色从红色过渡到黄色再到绿色。

设置渐变形状

默认是椭圆（ellipse），也可以设为圆形（circle）。

• radial-gradient(circle, red, blue) —— 圆形渐变
• radial-gradient(ellipse, red, blue) —— 椭圆渐变（默认）

如果容器宽高不一致，ellipse 会拉伸适应，而 circle 要求半径一致，超出部分不会显示完整圆。

控制大小和位置

可以指定渐变的起始位置和结束形状的大小。

• 位置：用 at center、at top left 或具体值如 at 20% 80%
• 尺寸关键词：closest-side、farthest-corner（常用）、closest-corner、farthest-side

<font face="Courier New">.box {
  background: radial-gradient(circle at top left, white, black);
}</font>

这个渐变从左上角开始，向右下方向扩展。

<font face="Courier New">.fancy-bg {
  background: radial-gradient(closest-side circle at center, #ffcc00, #ff3366);
}</font>

渐变在碰到最近的边时结束，适合做聚焦光晕效果。

添加颜色停止点

你可以精确控制每种颜色在什么位置出现。

<font face="Courier New">.stop-example {
  background: radial-gradient(red 10%, yellow 50%, green 90%);
}</font>

红色从 10% 开始，黄色在 50%，绿色到 90% 结束。中间区域平滑过渡。

还可以叠加多个径向渐变，用逗号分隔：

<font face="Courier New">.multi-gradient {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255,0,0,0.5), transparent 20%),
    radial-gradient(circle at 80% 70%, rgba(0,255,0,0.5), transparent 20%),
    blue;
}</font>

这可以创建多个光斑叠加在蓝色背景上的效果。

基本上就这些。掌握 radial-gradient 的关键是理解形状、位置、尺寸和颜色分布之间的关系。多试几种组合，就能做出丰富的视觉效果了。不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS径向渐变怎么用？radial-gradient教程》文章吧，也可关注golang学习网公众号了解相关技术文章。