学习如何使用css给数字加圆圈效果

效果图

代码

css样式

我们添加样式，让div添加背景颜色，添加高度，宽度，并设置为行内元素(display:table-cell），另外关键的样式为添加border-radius，边框弧度。

table-cell的显示方式，方便左右，上下居中，添加居中的样式。

 /*数字加圈*/
    .number_top_circle {
        display: table-cell;
        border-radius: 18px;
        background-color: #0052d9;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }

    .number_top_no_circle {
        display: table-cell;
        border-radius: 18px;
        background-color: #cccccc;
        width: 25px;
        height: 25px;
        text-align: center;
        vertical-align: middle;
        color: #333333;
    }
    /*数字加圈*/

html代码

关键代码

<div class="number_top_circle">1</div>
<div class="number_top_circle">2</div>
<div class="number_top_circle">3</div> 
<div class="number_top_no_circle">4</div>
<div class="number_top_no_circle">5</div>
<div class="number_top_no_circle">6</div>