简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

How to display circular images in css3

php中世界最好的语言
Release： 2017-11-22 16:23:27
Original
5376 people have browsed it

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}
Copy after login

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>
Copy after login

2. Corresponding CSS code: 

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

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:

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!

Related labels：
css css3
source：php.cn
Previous article：What is the difference between class and id Next article：HTML drop-down menu code
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！