communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

Introduction à la méthode de création d'images arrondies et d'images ovales avec CSS3

高洛峰
Libérer： 2017-03-07 15:23:07
original
2579 Les gens l'ont consulté

Cet article vous apprend principalement le code d'implémentation spécifique pour créer des images arrondies et des images elliptiques avec CSS3. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec vous. La méthode de création d'images arrondies et ovales avec CSS3 est pour votre référence. Le contenu spécifique est le suivant

1 Images arrondies

<!DOCTYPE html>
<html>
<head>
<style>
img {   
    border-radius: 8px;   
}   
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">
</body>
</html>
Copier après la connexion

<. 🎜>

Introduction à la méthode de création dimages arrondies et dimages ovales avec CSS3

2. Image ovale

<!DOCTYPE html>
<html>
<head>
<style>
img {   
    border-radius: 50%;   
}   
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400"    style="max-width:90%">
</body>
</html>
Copier après la connexion

Introduction à la méthode de création dimages arrondies et dimages ovales avec CSS3

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.


Pour plus d'informations sur la façon de créer des images arrondies et des images ovales à l'aide de CSS3, veuillez faire attention au site Web PHP chinois !

Étiquettes associées：
CSS3 圆角 椭圆形
source：php.cn
Article précédent：Analyse détaillée du processus de création de vignettes avec CSS3 Article suivant：Analyse d'un exemple de mise en page réactive CSS3media
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1961
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2122
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1789
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1689
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1697
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal