css两个圆重合

CSS是一种用于网页布局和样式的语言，它可以创建各种各样的效果，比如让两个圆重合。下面我们将介绍如何实现这个效果。

.circle1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

.circle2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: green;
  position: absolute;
  left: 50px;
  top: 50px;
}

首先，我们需要定义两个圆的样式，使用border-radius属性将它们变成圆形，使用background-color指定它们的背景色。接着，我们使用position属性将圆1和圆2定位在页面上。

为了让两个圆重合，我们需要将其中一个圆相对于另一个圆定位。这里我们使用left和top属性将圆2定位到距离圆1左边50像素，距离圆1上边50像素的位置。这样，两个圆就会重合在一起。

在页面中添加以下代码：

<div class="circle1"></div>
<div class="circle2"></div>

添加完毕后，你会发现两个圆重合在一起，效果如下：

实现这样的效果很简单，只需要掌握基本的CSS定位和样式属性即可。如果你想修改圆的大小、颜色或定位，只需要简单地修改对应的CSS属性，就可以达到你想要的效果。