如何实现线性渐变填充圆形背景？纯CSS或SVG方案咨询

嘿，这个问题我太有共鸣了——用一堆div堆出来的渐变圆形背景不仅代码乱糟糟，响应式调整起来简直头大！别担心，纯CSS和SVG都能完美解决你的需求，而且两种方案都比你现在的方式好维护得多，下面给你详细拆解：

这种方案只需要一个容器（甚至不用额外元素，用伪元素就行），通过mask属性把线性渐变裁剪成多个圆形，代码简洁且天生支持响应式。

举个例子，假设你要3个不同位置、大小的渐变圆形：

.card {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 300px;
  background: #fff; /* 容器底色 */
}

.card::before {
  content: "";
  position: absolute;
  inset: 0; /* 占满整个容器 */
  /* 定义通用的线性渐变 */
  background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  /* 用多个径向渐变作为遮罩，只显示圆形区域的渐变 */
  mask: 
    radial-gradient(circle at 20% 30%, black 8%, transparent 8%),
    radial-gradient(circle at 70% 50%, black 12%, transparent 12%),
    radial-gradient(circle at 40% 80%, black 10%, transparent 10%);
  /* 兼容webkit内核浏览器 */
  -webkit-mask: 
    radial-gradient(circle at 20% 30%, black 8%, transparent 8%),
    radial-gradient(circle at 70% 50%, black 12%, transparent 12%),
    radial-gradient(circle at 40% 80%, black 10%, transparent 10%);
}

关键细节： #

• 用百分比设置圆形的位置和大小，容器缩放时圆形会自动适配，完美实现响应式特性
• 要修改圆形的数量、位置或大小，只需要在mask里添加/修改对应的radial-gradient规则即可，维护成本极低
• 如果需要每个圆形用不同的线性渐变，可以把background改成多层线性渐变，然后对应调整mask的层级匹配

如果你需要更精细的控制（比如每个圆形用不同的渐变、调整渐变角度），SVG是更好的选择，它本身是矢量图，缩放不会失真，代码也更直观。

你可以直接把SVG嵌入HTML，或者作为背景图片使用：

<!-- 嵌入HTML的方式 -->
<div class="card">
  <svg class="circles-bg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- 定义多个渐变（如果需要不同渐变的话） -->
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#f093fb" />
        <stop offset="100%" stop-color="#f5576c" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="100%" stop-color="#00f2fe" />
      </linearGradient>
    </defs>
    <!-- 每个圆形对应一个circle元素，灵活控制位置、大小和渐变 -->
    <circle cx="100" cy="90" r="40" fill="url(#grad1)" />
    <circle cx="350" cy="150" r="60" fill="url(#grad2)" />
    <circle cx="200" cy="240" r="50" fill="url(#grad1)" />
  </svg>
</div>

然后用CSS让SVG铺满容器：

.card {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 300px;
  overflow: hidden;
}

.circles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

优势： #

• 可以给每个圆形单独设置不同的渐变、透明度或样式，自由度极高
• viewBox属性确保SVG可以自适应容器大小，响应式表现完美
• 代码结构清晰，修改时直接对应到具体的circle元素即可

• 如果所有圆形用相同的线性渐变，且不需要复杂样式，优先选纯CSS方案，代码更简洁，和现有CSS样式整合更方便
• 如果需要多渐变、复杂形状，或者团队里更熟悉SVG，选SVG方案，可维护性和扩展性更强

内容的提问来源于stack exchange，提问作者jor1s