Home >Web Front-end >HTML Tutorial >How to display circular images in css3
Many friends only know how to display pictures, 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:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片圆形布局 在线演示</title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="div"><img src="images/1.jpg" /></div> </body> </html>
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 website Other related articles!
Related reading:
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!