How to display circular images in css3

Many friends only know how to displaypictures, but they don’t know how to use CSS style layout to realize circular pictures, so today I will teach you how to use CSS to display circular pictures

First of all, the picture must be square.

Use layout technology

Use CSS3 rounded corner technology to achieve.

Use CSS3 style words: border-radius

Syntax:

div{border-radius:5px}

Set the rounded corner style for the image:

.abc img{border-radius: 5px}

Set class=”abc”ObjectThe four corners of the picture are rounded to 5px

CSS rounded corners to achieve the picture circle example

First A square picture is placed in a DIV box, and a circular effect is achieved by setting border-radius:50% to the picture in the box.

1. Complete HTML source code:

2. Corresponding CSS code:

#div{ margin:10px auto} #div img{ border-radius:50%}

There are so many ways to use CSS style layout to create a circular image. For more exciting content, please pay attention to php Chinese websiteOtherrelated articles!

Related reading:

How to use text-decoration

Use of table tag in HTML Method

css web page border code

The above is the detailed content of How to display circular images in css3. For more information, please follow other related articles on the PHP Chinese website!