Shulou(Shulou.com)06/01 Report--

How to use CSS to achieve a circular image? I believe most people still don't know much about it, so share this article for everyone's reference. I hope you will gain a lot after reading this article. Let's find out together!

SS can achieve many effects in web pages, so how do we achieve circular images using pure CSS? In this article, we will introduce the CSS implementation of circular images, the following look at the specific content.

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

Let's set a basic style for 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 that allows you to use the size of its operating context. You can set its width and height by entering precise pixel values, percentages, or make background covers to fit the entire page.

Now that we have the image set up, let's change the CSS code to create a circular frame. We'll use the border-radius attribute, which allows us to change the radians of an element's angles. 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 above is "How to achieve circular images using pure CSS? "For all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.