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>

Answer 2

您可以在圆形div上使用具有多种颜色的多个box-shadows。它们需要用逗号分隔：

#circles {
  background-color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 100px 2px 0 0 #f8ff00,
              200px 2px 0 0 #009901,
              300px 4px 0 0 #3531ff;
/* offset-x | offset-y | blur-radius | spread-radius | color */
}

<div id="circles"></div>

在圆形div上具有几种颜色。它们需要用逗号分隔：

CSS背景上的多个圆圈

2 个答案: