Learn how to add circle effect to numbers using css

renderings

code

css style

We add styles, let the div add background color, add height, width, and set it as an inline element (display: table-cell), and the other key styles are adding border-radius and border radian.

The display method of table-cell is convenient for left and right, top and bottom centering, and adding centering style.

 /*数字加圈*/
    .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 code

key code

<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>