CSS中有很多種方式可以制作出好看的圓圈序號(hào)，下面我們就來介紹一些方法。

1. 使用list-style-type屬性和border-radius屬性
ol {
list-style-type: circle;
}
li {
border-radius: 50%;
padding: 5px;
margin-bottom: 10px;
}
2. 使用:before偽元素和content屬性以及background-color和border-radius屬性
ol {
counter-reset: my-counter;
}
li {
position: relative;
}
li:before {
counter-increment: my-counter;
content: counter(my-counter);
background-color: #f00;
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
margin-right: 10px;
line-height: 20px;
}
3. 使用SVG
ol {
counter-reset: my-counter;
}
li {
position: relative;
}
li:before {
counter-increment: my-counter;
content: counter(my-counter);
width: 25px;
height: 25px;
display: inline-block;
margin-right: 10px;
}
li:before svg {
width: 100%;
height: 100%;
}
li:before svg circle {
fill: #f00;
stroke: none;
}

以上三種方式都可以制作出好看的圓圈序號(hào)，我們還可以根據(jù)需求來選擇不同的方式。