Comment afficher des images circulaires en CSS3-tutoriel HTML-php.cn

Comment afficher des images circulaires en CSS3

php中世界最好的语言

Libérer： 2017-11-22 16:23:27

original

5424 Les gens l'ont consulté

Beaucoup d'amis ne savent qu'afficher des images, mais ils ne savent pas comment utiliser la mise en page de style CSS pour réaliser des images circulaires, alors aujourd'hui je vais vous apprendre à utiliser CSS pour afficher des images circulaires

Tout d'abord, l'image doit être carrée.

Utilisation de la technologie de mise en page

Utilisation de la technologie des coins arrondis CSS3.

Utilisez des mots de style CSS3 : border-radius

Syntaxe :

div{border-radius:5px}

Copier après la connexion

Définissez les coins arrondis de l'image :

.abc img{border- radius:5px}

Définir class="abc"ObjectLes quatre coins de l'image sont arrondis à 5px

Coins arrondis CSS pour obtenir l'exemple de cercle d'image

Placez d'abord une image carrée dans une boîte DIV et définissez border-radius:50% sur l'image dans la boîte pour obtenir un effet circulaire.

1. Code source HTML complet :

<!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>

Copier après la connexion

2. Code CSS correspondant :

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

Copier après la connexion

Voici comment utiliser la mise en page de style CSS pour créer une image circulaire. .Beaucoup plus. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php autres articles liés !

Lecture connexe :

Comment utiliser la décoration de texte

Utilisation de la balise de table dans Méthode HTML

Code de bordure de page Web CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!