在CSS中想要弄出圓形有多種方式，下面列舉三種最常用的方法。

1. 使用border-radius屬性
/* 以寬度和高度相等的正方形為例 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* 圓形的半徑為寬度的50% */
}
/* 也可以使用如下方式設(shè)置不同寬度和高度的元素 */
.circle2 {
width: 120px;
height: 80px;
border-radius: 50%; /* 圓形的半徑為寬度的50% */
}
2. 使用偽元素實(shí)現(xiàn)
.circle::before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
3. 進(jìn)一步擴(kuò)展偽元素實(shí)現(xiàn)
.circle::before {
content: "";
display: block;
padding-top: 100%; /* 建立比例關(guān)系 */
}
.circle::after {
content: "";
display: block;
height: 0;
clear: both; /* 清除浮動(dòng) */
}
/* 實(shí)現(xiàn)純CSS圓形 */
.circle {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
}
.circle::before {
content: "";
display: block;
padding-top: 100%;
}
.circle::after {
content: "";
display: block;
height: 0;
clear: both;
}

以上三種方法不僅可以用于實(shí)現(xiàn)簡單的圓形，還可以用于制作復(fù)雜的圖形。讀者可以嘗試使用以上代碼，應(yīng)用到自己的網(wǎng)頁設(shè)計(jì)中。