Maison > Article > interface Web > Comment afficher des images circulaires en CSS3
Comment afficher des images circulaires en CSS3
- php中世界最好的语言original
- 2017-11-22 16:23:275361parcourir
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}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>
2. Code CSS correspondant :
#div{ margin:10px auto}
#div img{ border-radius:50%}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 :
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!