CSS帶圈圈的數字是一種常用的設計效果，可以讓數字更加醒目、美觀。要在CSS中實現這個效果，可以使用一些特殊的偽元素及樣式屬性來實現。

/*在CSS中實現數字帶圈圈效果的代碼*/
/*創建一個帶陰影效果的圖形*/
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
}
/*為圓圈中的數字設置樣式*/
.circle::before {
content: attr(data-value);
font-size: 12px;
font-weight: bold;
}
/*設置圓圈中數字的位置*/
.circle:first-of-type::before {
margin-left: -1px;
}
.circle:last-of-type::before {
margin-right: -1px;
}

這段代碼中，我們通過CSS樣式屬性來設置圓圈的大小、形狀和樣式。接著，我們使用偽元素::before來設置數字的樣式，并將這個數字放置在帶圓圈的元素的內容中。

其中，使用attr(data-value)可以獲取到標簽中data-value屬性的值，將其作為偽元素的內容展示。同時，通過margin-left和margin-right的設置，可以將數字與圓圈的邊緣對齊，達到了帶圈圈的數字效果。

通過以上代碼，我們可以輕松實現帶圈圈的數字效果，為網站帶來更加醒目、美觀的視覺效果。