时间戳

首页 > 解决方案 > CSS背景上的多个圆圈

css - CSS背景上的多个圆圈

问题描述

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

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

标签： css

解决方案

只需使用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>

推荐阅读