CSS圆形中心的数字可以利用一些技巧来实现。
/* 首先,使用CSS样式创建一个圆形*/ .circle { width: 50px; height: 50px; border-radius: 50%; background-color: #007bff; }
然后,使用CSS伪元素:before或:after来创建一个可居中的数字,并用绝对定位将其放置在圆形的中心。
/*添加数字*/ .circle:before { content: "5"; font-size: 24px; font-weight: bold; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
其中,content属性定义了伪元素的内容。
font-size属性定义了数字的大小。
font-weight属性定义了数字的加粗程度。
color属性定义了数字的颜色。
position: absolute将数字绝对定位。
top:50%和left:50%将数字居中。
transform:translate将数字向左和向上移动50%的大小,以将其置于圆形中心。