[分享]css两个圆重叠在一起

在网页设计中，常常会用到两个圆重叠在一起的效果，这个效果可以用CSS实现。

.circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
}

.circle1 {
   background-color: #FFC107;
}

.circle2 {
   background-color: #4CAF50;
   position: relative;
   left: 60px;
} 

上面的代码定义了两个圆形div，分别为circle1和circle2，他们都有圆形的形状，且圆心位置一样。其中，circle1的背景色为橙色，circle2的背景色为绿色，并且它的位置相对圆心向右移动了60像素。

为了让两个圆形重叠在一起，需要使用position属性来控制它们的位置。由于circle2相对于父元素进行移动，因此需要将其作为子元素包裹在一个容器div中。这个容器div的宽度和高度都为200像素，是两个圆形的宽度和高度之和，便于实现重叠效果。

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

.container {
   width: 200px;
   height: 200px;
   position: relative;
}

.circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
}

.circle1 {
   background-color: #FFC107;
}

.circle2 {
   background-color: #4CAF50;
   position: relative;
   left: 60px;
} 

如上所述，实现两个圆形的重叠效果，需要使用CSS的position属性来实现位置控制，以及设置父元素的宽度和高度等属性来实现重叠效果。