css圆圈上显示文字

CSS圆圈上显示文字

.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e74c3c;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}
    div class="circle">
    1/div>
    

在CSS中制作圆圈并将文字显示在圆圈上是一种非常常见的设计。你可以使用"border-radius"属性来将一个矩形转换成圆形。然后，你可以使用"display"属性将该圆形转换成一个弹性盒子容器（Flexbox container）。最后，使用"justify-content"和"align-items"属性将文本居中显示在圆圈中央。

在上面的代码中，我们使用了一个类名叫作"circle"来应用上述CSS样式，使其显示成一个红色的圆形。我们在该圆形中加入了一个数字"1"。你同样可以在圆圈中使用其他内容。

这个CSS技巧是一种简单，灵活和效果非常好的方式来设计你的UI界面。你可以将其应用于诸如网站导航，产品标签或其它需要有趣的标记的设计中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！