css - css 背景上的多个圆圈

Question

在 css 中有没有一种方法可以在一个 div 元素背景上的不同位置创建多个不同大小的圆圈？我目前在伪元素中有一个圆圈，但这还不够，所以我想也许可以使用背景 css 来完成。

我不想添加额外的 div，所以试图让它在一个 div 上工作。

Answer 1

只需使用 radial-gradient 就可以拥有任意数量的圆圈:

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:
    radial-gradient(farthest-side,yellow 32%,yellow 90% ,purple 93%, purple 96%,transparent) left center/60px 60px,
    radial-gradient(farthest-side,yellow 96%,transparent) bottom left/80px 80px,
    radial-gradient(farthest-side,green  96%,transparent) top right/80px 80px,
    radial-gradient(farthest-side,blue   96%,transparent) 100px 50px/100px 100px,
    radial-gradient(farthest-side,red    96%,transparent) top left/40px 40px;
    /* the circle                                          position / size */
  background-repeat:no-repeat;
}

<div class="box">

</div>