Maison > Article > interface Web > Comment définir un cercle circulaire en CSS3
Comment définir un cercle circulaire en CSS3
- WBOYoriginal
- 2021-12-10 14:41:383157parcourir
Méthode : 1. Utilisez le style "largeur : diamètre du cercle intérieur ; hauteur : diamètre du cercle intérieur" pour définir l'élément div sur un carré. 2. Utilisez le style "border-radius:50%" pour définir le carré sur un carré. circle; 3. Give Ajoutez simplement le style "border:thickness value solid color value" à l'élément circulaire pour obtenir un cercle annulaire.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment définir un cercle annulaire en CSS3
En CSS, vous pouvez d'abord créer un élément div carré avec une largeur et une hauteur égales, puis utiliser l'attribut border-radius pour définir le div carré dans un cercle, et enfin, utilisez l'attribut border pour donner au cercle. Ajoutez simplement une bordure à l'élément de forme.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:200px;
height:200px;
border-radius:50%;
border:100px solid pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo 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!
Articles Liés
Voir plus- Quelle est la propriété float du CSS ? Quelles sont ses trois valeurs ?
- Pourquoi l'attribut font bold est-il dans le fichier CSS ?
- Quelles règles personnalisées sont utilisées pour l'animation CSS3 ?
- Quelles règles CSS sont nécessaires pour définir des polices personnalisées ?
- Comment définir le gris d'arrière-plan et la transparence en CSS3