CSS 自適應的圓形背景

在現代網頁設計中，我們經常需要添加各種形狀的背景，其中圓形背景是一種常見的選擇。本文將介紹如何使用 CSS 實現自適應的圓形背景。

.circle {
width: 50%;
padding-bottom: 50%;
border-radius: 50%;
background: #e8e8e8;
}

首先，我們需要創建一個 div 容器，將其類名設置為 “circle”。接著，我們需要設置其寬度和高度。由于圓形的寬高相等，我們可以使用 padding-bottom 屬性來實現。具體來說，我們將其設置為寬度的百分之五十，這樣就會自動計算出高度。接著，我們需要設置圓角半徑為寬度的百分之五十，這將使 div 變為圓形。最后，我們為其添加背景顏色，這里使用了灰色作為背景。

值得注意的是，該方法實現的圓形背景是自適應的。也就是說，當容器的寬高變化時，圓形的大小也會自動調整。這種方法尤其適用于響應式網頁設計，可以實現不同屏幕下圓形背景的自適應。