淘先锋技术网

首页 1 2 3 4 5 6 7

CSS圆圈里写数字可以通过使用CSS的伪类元素实现。下面是一个样例代码:

.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
}
.circle::before {
content: "1";
}

上面的代码定义了一个圆形元素,其宽高为30像素,border-radius为50%,背景颜色为红色。通过display:flex和align-items、justify-content属性使内容居中显示。接着利用CSS的伪类元素before,在circle元素前添加一个内容为“1”的伪类元素,即可在圆形元素内部显示数字1。

如果需要显示不同的数字,只需要将伪类元素的content属性修改为对应的数字即可。同样,还可以通过修改circle元素的宽高、颜色等属性,来产生不同样式的圆形数字。