css文字组成圆形

CSS文字组成圆形是很常见的一种设计，可以让网页更加美观。

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
}
    

上述代码使用了border-radius属性，将宽度和高度设为相同的值，可以让div变成一个圆形。同时，在内部使用了flex布局，让文字能够居中显示。这个时候，文字会在一个方块里居中，需要使用字体大小和字重来调整字形。同时，将背景设置为灰色，字体颜色为白色，可以让圆形更加美观。

另外，如果要制作多个圆形，可以将这个class重复使用，并且修改文字即可。这样只需要很少的代码就可以实现美观的效果。

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