在CSS中，繪制兩個圓有多種方法，下面我們來介紹兩種不同的實現方式。

1. 使用偽元素：

.circle-group {
position: relative;
width: 200px;
height: 100px;
}
.circle-group::before,
.circle-group::after {
content: '';
position: absolute;
border-radius: 50%;
}
.circle-group::before {
width: 100px;
height: 100px;
background-color: red;
left: 0;
}
.circle-group::after {
width: 80px;
height: 80px;
background-color: green;
left: 60px;
top: 10px;
}

首先將兩個圓放在一個容器中，使用position: relative;將容器設為相對定位。 使用偽元素::before和::after，分別設置為兩個圓。接著，通過設置圓的寬、高、背景色和位置來實現不同的效果。通過border-radius屬性來設置圓形。這樣就可以輕松地實現兩個圓的布局。

2. 使用background-image：

.circle-group {
position: relative;
width: 200px;
height: 100px;
background-image:
radial-gradient(circle at 50% 30%, red 20%, transparent 20%),
radial-gradient(circle at 75% 70%, green 30%, transparent 30%);
background-size: 100px 100px, 80px 80px;
background-position: 0 0, 60px 10px;
background-repeat: no-repeat;
border-radius: 50%;
}

可以使用短代碼實現，使用background-image屬性來設置圓形背景圖。通過radial-gradient語法可以定義漸變圓。在這個例子中，我們定義了兩個圓，使用at坐標來設置圓心位置，使用red和green來設置顏色。此外，還設置了不同的大小、位置和不重復屬性。最后通過border-radius屬性來設置形狀為圓形。這樣就可以輕松實現圓形的布局，而不需要使用多個標記。