径向渐变

径向渐变从一个中心点向外呈圆形或椭圆扩散：radial-gradient(形状大小 at 位置, 颜色...)：

radial-gradient(circle, red, blue)：正圆，从中心红到边缘蓝。
ellipse 是默认形状，跟随容器比例；可用 circle at top left 指定圆心位置。
大小可用 closest-side、farthest-corner（默认）等关键词，控制渐变半径到哪条边。

径向渐变的招牌应用：

光晕/聚光灯：中心亮色到透明，压在深色背景上。
球体质感：高光点偏移到左上角（circle at 30% 30%），配合深浅两色就有立体感。
放射条纹：配合 repeating 循环做同心圆、靶心图案。

与线性渐变一样，停靠点语法完全通用，硬边、透明过渡随便组合。

本节要点radial-gradient(形状大小 at 圆心, 颜色...)，circle/ellipse 二选一；at 30% 30% 偏移高光出球体感；光晕与同心圆纹理是常用场景。

CSS

<style>
  .glow {
    height: 90px;
    background: radial-gradient(
      circle at center, #9be8ec 0%, transparent 70%
    ), #123;                     /* 深底上的光晕 */
  }
  .ball {
    width: 70px; height: 70px;
    border-radius: 50%;
    /* 高光偏左上，立体球 */
    background: radial-gradient(
      circle at 30% 30%, #c8f4f7, #0d7c8a 70%
    );
  }
  .rings {
    height: 90px; flex: 1;
    background: repeating-radial-gradient(
      circle, #39c5cf 0 8px, #0d5c66 8px 16px
    );
  }
</style>
<div class="glow"></div>
<div style="display:flex; gap:10px; margin-top:8px;">
  <div class="ball"></div>
  <div class="rings"></div>
</div>

🔗 相关词条线性渐变过渡 border-radius box-shadow @keyframes clip-path

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读