本文目錄導讀：

1. 創(chuàng)建圓形
2. 填充顏色
3. 添加邊框（可選）

CSS創(chuàng)建圓形并填充顏色的方法

在網頁設計中，我們經常需要創(chuàng)建圓形并填充顏色以增強視覺效果，CSS（層疊樣式表）為我們提供了強大的工具來實現(xiàn)這一目標，本文將介紹如何使用CSS創(chuàng)建圓形并填充顏色。

創(chuàng)建圓形

在CSS中，我們可以通過設置元素的寬度和高度相等，以及使用border-radius屬性來創(chuàng)建圓形。

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

這將創(chuàng)建一個直徑為100px的圓形。

填充顏色

創(chuàng)建了圓形之后，我們可以使用CSS的background-color屬性來填充顏色。

.circle {
  background-color: red;
}

這將把圓形填充為紅色，你也可以選擇使用其他顏色，如藍色、綠色、黃色等，或者通過十六進制顏色代碼、RGB或HSL值來定義自定義顏色。

添加邊框（可選）

如果你希望圓形有邊框，可以使用border屬性，下面的代碼將為圓形添加一個黑色的邊框：

.circle {
  border: 2px solid black;
}

通過CSS，我們可以輕松地創(chuàng)建圓形并填充顏色，我們設置元素的寬度、高度和border-radius來創(chuàng)建圓形，我們使用background-color屬性來填充顏色，如果需要，我們還可以添加邊框，這種方法簡單易用，是網頁設計中常見的技巧之一。