css 红色圆圈数字 |css 点击后颜色

下面是一个基本的示例代码，它可以让数字显示为红色圆圈：

span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
text-align: center;
border-radius: 50%;
background-color: red;
color: white;
font-weight: bold;
font-size: 12px;
line-height: 20px;
}

该代码使用了span元素，以数字作为其内容。为了使数字呈现为圆形，将span元素的高度和宽度设置为相等的值，并为其设置边框半径50%。此外，将背景颜色设置为红色，并将文字颜色设置为白色，以便与背景形成对比。最后，将字体加粗，设置字号大小和行高，使数字居中显示。

如果要显示多个红色圆圈数字，可以将它们包装在一个

ul

123

这样就可以创建一个红色圆圈数字列表。

总而言之，使用CSS的红色圆圈数字可以为网页带来令人印象深刻的视觉效果，为数字呈现添加一些味道。