How to implement a circle using CSS3

In web design, circles are often needed to achieve some specific effects. In the past, we might have needed to use images or JS to achieve the ring effect, but now, with the power of CSS3, we can easily achieve the ring effect. This article will introduce how to use CSS3 to implement a circle, as well as some practical application examples.

Basic knowledge

Before introducing how to use CSS3 to implement a circle, we need to master some basic knowledge:

1. Box model

The box model is one of the most basic concepts in CSS, which defines the dimensions, borders, and padding of an element as it appears on the page. There are two types of box models: standard model and IE model. The difference between them lies in the content included when calculating width and height. In this article, we use the standard model.

2. Border

The border in CSS can be used to add an outer border to an element, and its properties include width, style and color. We can define the border style of an element through the following code:

border: 1px solid #000;

This code can define a 1 pixel wide black solid border.

3. border-radius

border-radius is a very useful property in CSS3, which can be used to define the rounded corners of an element. We can set rounded corners for an element through the following code:

border-radius: 50%;

This code can turn all four corners of an element into rounded corners, with a radius of 50% of the width of the element.

Implementing the Circle

After understanding the above basic knowledge, we can start to introduce how to use CSS3 to implement the circle. First, we need to define a div element that will serve as our donut container. We can define this element through the following code:

<div class="circle"></div>

.circle {
    width: 100px;
    height: 100px;
    border: 10px solid #000;
    border-radius: 50%;
}

In this code, we set the width and height of the element to 100 pixels, the border width to 10 pixels, the border style to a solid black line, and the corner radius is 50% of the element's width.

Next, we need to use the rotation and pseudo-element functions of CSS3 to achieve the ring effect. We can define the ring through the following code:

.circle::before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

In this code, we define a before pseudo-element and set the width, height, border width, border style and rounded radius for it. To keep it inside the ring, we use negative margins to adjust its position. Finally, we use the transform attribute to rotate the element 45 degrees so that it looks like a ring.

Application Example

Through the above method, we can easily achieve the ring effect. Next, we will introduce some practical application examples.

1. Badge Effect

We can use rings to achieve the effect of the badge, so that it has a certain display space in web design. The following is an example of implementing a badge effect:

<div class="badge">
    <span>NEW</span>
</div>

.badge {
    display: inline-block;
    border: 10px solid #000;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    width: 34px;
    height: 34px;
}

.badge::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
    z-index: -1;
}

.badge span {
    display: block;
    position: relative;
    z-index: 2;
}

In this code, we define a badge effect with a NEW tag. By setting the properties of the ring and adding the before pseudo-element, we have achieved a beautiful badge.

2. Progress bar effect

We can use a circle to achieve a progress bar effect, so that it has an image and intuitive display effect during the user's operation. The following is an example of implementing a progress bar effect:

<div class="progress-bar">
    <div class="inner-bar" data-value="70"></div>
</div>

.progress-bar {
    position: relative;
    margin: 50px auto;
    width: 120px;
    height: 120px;
    border: 10px solid #f7f7f7;
    border-radius: 50%;
}

.inner-bar {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border: 10px solid #3498db;
    border-radius: 50%;
    clip: rect(0, 60px, 120px, 60px);
    transform: rotate(45deg);
    z-index: -1;
}

[data-value]:before {
    content: attr(data-value) "%";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 120px;
    text-align: center;
}

In this code, we define a progress bar effect with 70% progress. By setting the attributes of the ring, adding an inner-bar element to handle the display length of the progress bar, and using the before pseudo-element to add the progress value, we achieved a simple and beautiful progress bar effect. .

Summary

CSS3 is a simple and practical way to achieve the ring effect, which can achieve a variety of effects in web design, such as badges, progress bars, etc. By mastering the basic knowledge and using the attributes, pseudo elements, rotation and other functions of the ring, we can easily achieve the ring effect. At the same time, we can also further utilize the power of the ring effect in practical applications to improve the quality and user experience of the entire web design.

The above is the detailed content of How to implement a circle using CSS3. For more information, please follow other related articles on the PHP Chinese website!