CSS中有許多實用的樣式，其中之一就是數字圓圈樣式。這種樣式可以將數字排列在圓圈中，讓頁面更具有吸引力和視覺效果。下面是CSS中所有數字圓圈的樣式：

/* 方形無序數字圓圈 */
ul {
list-style-type: none;
counter-reset: my-counter;
}
li::before {
content: counter(my-counter);
counter-increment: my-counter;
border: 1px solid black;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
}
/* 圓形數字圓圈 */
ol {
list-style-type: none;
counter-reset: my-counter;
}
li::before {
content: counter(my-counter);
counter-increment: my-counter;
border: 1px solid black;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
margin-right: 5px;
}
/* 帶背景顏色的數字圓圈 */
ul {
list-style-type: none;
counter-reset: my-counter;
}
li::before {
content: counter(my-counter);
counter-increment: my-counter;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
border-radius: 50%;
background-color: #ccc;
}
/* 帶漸變背景顏色的數字圓圈 */
ul {
list-style-type: none;
counter-reset: my-counter;
}
li::before {
content: counter(my-counter);
counter-increment: my-counter;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
border-radius: 50%;
background: linear-gradient(white, #ccc);
}
/* 3D效果數字圓圈 */
ul {
list-style-type: none;
counter-reset: my-counter;
}
li::before {
content: counter(my-counter);
counter-increment: my-counter;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
margin-right: 5px;
border-radius: 50%;
background-color: #ccc;
box-shadow: inset 0 0 0 2px #fff;
transform: perspective(50px) rotateY(-30deg);
}

以上是CSS中所有數字圓圈樣式的代碼，可以根據需要選擇其中的一種或多種樣式來使用。