Maison > Article > interface Web > Comment changer la taille d'un cercle avec CSS
Comment changer la taille d'un cercle avec CSS
- WBOYoriginal
- 2021-11-30 18:30:513149parcourir
En CSS, vous pouvez utiliser les attributs width et height pour modifier la taille du cercle. Les valeurs de ces deux attributs doivent être égales, indiquant le diamètre de l'élément circulaire. Il vous suffit d'ajouter "width: changes". diamètre" à l'élément circulaire. ,hauteur : diamètre modifié ;" le style suffit.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Comment changer la taille d'un cercle en CSS
Nous pouvons changer la taille d'un cercle en changeant le diamètre du cercle En CSS, le diamètre du cercle est contrôlé par les attributs de largeur et de hauteur. . L'exemple est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
.ellipse{
width: 200px;
height: 200px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
.ellipse1{
width: 300px;
height: 300px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
</style>
</head>
<body>
<div class="ellipse"></div>
<div class="ellipse1"></div>
</body>
</html>Résultat de sortie :
(Partage vidéo 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!