Comment puis-je créer et styliser des cercles en utilisant HTML5 et CSS3 ?

Dessiner des cercles en HTML5 et CSS3

Bien que HTML5 et CSS3 n'aient pas de support natif pour dessiner directement des cercles, il est possible de reproduire le apparition d'un cercle à l'aide de techniques innovantes.

Création d'un cercle avec des arrondis Coins

Pour simuler un cercle, vous pouvez créer un élément rectangulaire et lui appliquer des coins arrondis. Le rayon des coins arrondis doit être la moitié de la largeur ou de la hauteur souhaitée du cercle que vous souhaitez créer.

Par exemple, le code suivant crée un cercle rouge d'un diamètre de 50 pixels :

#circle {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  background: red;
}

<div>

Ajout de texte à l'intérieur d'un cercle

Pour ajouter du texte à l'intérieur du cercle, positionnez l'élément de texte de manière absolue dans le conteneur du cercle et centrez-le, alignez-le verticalement et horizontalement.

#circle {
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

<div>

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!