效果图：

CSS：

/*设置圆形*/
.circle {
    /*宽高相等*/
    height: 50px;
    width: 50px;
    /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
    border-radius: 25px;
    /*背景色*/
    background-color: blue;
    /*设置block才能显示出来*/
    display: inline-block;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}

使用span标签设置css样式：

<span class="circle blue"></span>
<span class="circle red"></span>