CSS中，我們可以使用border-radius屬性來(lái)制作圓形的元素。而如果要在圓形元素內(nèi)加入數(shù)字，我們可以使用偽元素::before或::after來(lái)實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的例子：

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
}
.circle::before {
content: "1";
display: block;
}

上述代碼會(huì)生成一個(gè)寬高均為50px且背景為紅色的圓形。在圓形上方，使用偽元素::before插入數(shù)字"1"。由于插入的數(shù)字本身是行內(nèi)元素，因此我們必須給它一個(gè)display:block的屬性才能使它成為塊級(jí)元素并且垂直居中。

當(dāng)然，如果需要在一個(gè)頁(yè)面上使用多個(gè)帶數(shù)字的圓形元素，我們可以使用class來(lái)共用樣式，同時(shí)通過(guò)data-*屬性來(lái)動(dòng)態(tài)地改變數(shù)字：

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 50px;
}
.circle::before {
content: attr(data-number);
display: block;
}
<div class="circle" data-number="1"></div>
<div class="circle" data-number="2"></div>
<div class="circle" data-number="3"></div>

在上述代碼中，我們給.circle元素添加了一個(gè)data-number屬性，并用attr(data-number)來(lái)獲取它的值。這樣，當(dāng)我們?cè)趆tml中拼接多個(gè).circle元素并設(shè)置不同的data-number屬性時(shí)，數(shù)字也會(huì)隨之改變，靈活方便。

除了使用::before和::after偽元素來(lái)插入數(shù)字，我們還可以使用背景圖像、內(nèi)邊距和定位等屬性來(lái)實(shí)現(xiàn)。這里就不再一一列舉了。