如何用CSS繪制兩個(gè)圓

在CSS中繪制兩個(gè)圓，可以通過(guò)使用border-radius屬性來(lái)實(shí)現(xiàn)，下面是一個(gè)簡(jiǎn)單的示例，展示了如何繪制兩個(gè)圓：

1、創(chuàng)建一個(gè)HTML元素，例如一個(gè)div，作為圓的容器。

<div class="circle-container"></div>

2、使用CSS來(lái)定義圓的樣式，可以通過(guò)設(shè)置width和height屬性來(lái)定義圓的大小，并通過(guò)border-radius屬性來(lái)使元素變?yōu)閳A形。

.circle-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
}

3、我們可以添加第二個(gè)圓，為了簡(jiǎn)單起見(jiàn)，我們可以使用偽元素（::before或::after）來(lái)創(chuàng)建第二個(gè)圓。

.circle-container::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #666;
}

在這個(gè)示例中，我們使用了偽元素來(lái)創(chuàng)建第二個(gè)圓，并將其定位在容器中的適當(dāng)位置，你可以根據(jù)需要調(diào)整圓的大小、顏色和位置。

這種方法僅適用于現(xiàn)代瀏覽器，因?yàn)橐恍┹^舊的瀏覽器可能不支持border-radius屬性，確保在使用之前檢查你的目標(biāo)瀏覽器是否支持這些特性。