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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
