How to implement a circular image using pure CSS?

CSS can achieve many effects in web pages, so how do we use pure CSS to achieve circular images? In this article, we will introduce the method of realizing circular images with CSS. Let’s take a look at the specific content.

We'll start with basic HTML and CSS (assuming you can build a blank HTML document and link a stylesheet to it).

<div class="img-circular"></div>

Let's set a basic style for the class img-circular.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
}

The background -size in the above code is a new property of CSS3, which can be used to manipulate the size of the background. You can set its width and height by entering exact pixel values, percentages, or make a background cover to fit the entire page.

After we set up the image, let’s change the CSS code to create a circular frame. We'll use the border-radius property, which allows us to change the arc of an element's corners. To make the image circular, our CSS file now looks like this:

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

The result is as follows: The picture becomes circular

This article is all over here. For more exciting content, you can pay attention to the CSS Video Tutorial column on the PHP Chinese website! ! !

The above is the detailed content of How to implement a circular image using pure CSS?. For more information, please follow other related articles on the PHP Chinese website!