CSS 是網(wǎng)頁設(shè)計(jì)中最重要的工具之一，它可以幫助我們設(shè)計(jì)出漂亮的按鈕、圖片、圖標(biāo)和其他元素。下面我們來看一下如何使用 CSS 來畫出兩個(gè)圓圈。

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #999;
display: inline-block;
}
.circle:first-child {
margin-right: 50px;
}

首先，我們需要定義一個(gè)名為“circle”的樣式類來畫出圓圈。在這個(gè)樣式類里，我們需要設(shè)置圓圈的高度、寬度和圓角半徑。在這里，我們設(shè)置寬度和高度為 200 像素，并將圓角半徑設(shè)置為 50%。由于圓形的半徑等于其寬度的一半，所以這里我們將寬度和高度的值設(shè)置為相同的值。接下來，我們設(shè)置了圓圈的背景顏色為 #999。

在上面的代碼中，我們還定義了一個(gè)偽類“:first-child”來設(shè)置第一個(gè)圓圈和第二個(gè)圓圈之間的間距。我們將第一個(gè)圓圈的右邊距設(shè)置為 50 像素，這樣第二個(gè)圓圈就會(huì)跟在第一個(gè)圓圈的右邊。

下面是我們需要添加到 HTML 中的代碼：

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

我們只需要添加兩個(gè) div 元素，并將這些元素的樣式類設(shè)置為“circle”。最終，我們就可以得到兩個(gè)相同大小的圓圈。