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元素的宽高、颜色等属性,来产生不同样式的圆形数字。