如何使用CSS画一个圆圈？圆圈中间写字？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用CSS画一个圆圈？圆圈中间写字？相关的知识，希望对你有一定的参考价值。
看下效果 ：
.circle_green
/*background: burlywood;*/
border: 2px solid #0fd41e;
color: #000;
width: 56px;
height: 56px;
border-radius: 50%;
font: 14px Arial, sans-serif;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
.circle_red
/*background: burlywood;*/
border: 2px solid #dd0000;
color: #000;
width: 56px;
height: 56px;
border-radius: 50%;
font: 14px Arial, sans-serif;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
.circle_yellow
/*background: burlywood;*/
border: 2px solid orange;
color: #000;
width: 56px;
height: 56px;
border-radius: 50%;
font: 14px Arial, sans-serif;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
使用的地方：
创建一个绿的圈圈
<p class="circle_green"><span id="all_by2" style="font-weight: bold; color: #449d44; font-size: 20px;">16</span></p>
创建一个红的圈圈
<p class="circle_red"><span id="all_by2" style="font-weight: bold; color: #449d44; font-size: 20px;">16</span></p>
以上是关于如何使用CSS画一个圆圈？圆圈中间写字？的主要内容，如果未能解决你的问题，请参考以下文章
css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?