How Can I Create Circular Number Backgrounds Using CSS?-CSS Tutorial-php.cn

How Can I Create Circular Number Backgrounds Using CSS?

Linda Hamilton

Release： 2024-12-18 18:58:11

Original

264 people have browsed it

How Can I Create Circular Number Backgrounds Using CSS?

Surrounding Numbers with Circle Backgrounds Using CSS

Enhancing the visual appeal of numbers by enclosing them in circular backgrounds can be achieved effortlessly with the power of CSS. Follow these steps to accomplish this:

In your CSS file, create a class with the following properties:

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

Copy after login

In your HTML file, wrap the number in a

element and apply the .numberCircle class.

<div class="numberCircle">30</div>

Copy after login

This will surround the number with a circular background, as shown in the image provided. Adjust the CSS properties as needed to customize the appearance of the circle and the number within it.

The above is the detailed content of How Can I Create Circular Number Backgrounds Using CSS?. For more information, please follow other related articles on the PHP Chinese website!