Comment obtenir un effet circulaire en CSS

CSS est un langage de feuille de style que nous utilisons souvent dans le développement Web. Il peut obtenir de nombreux effets de page intéressants, tels que des coins arrondis, des dégradés, des animations, etc. Dans cet article, nous verrons comment obtenir un effet circulaire en utilisant CSS.

En CSS, nous pouvons utiliser la propriété border-radius pour définir les coins arrondis d'un élément. Cette propriété accepte une ou plusieurs valeurs représentant respectivement le rayon du coin supérieur gauche, du coin supérieur droit, du coin inférieur droit et du coin inférieur gauche. Si une seule valeur est définie, cela signifie que les quatre coins sont égaux. Si deux valeurs sont définies, la première représente le rayon dans le sens horizontal et la seconde représente le rayon dans le sens vertical. Si trois valeurs sont définies, la première représente le rayon des coins supérieur gauche et inférieur droit, la seconde représente le rayon des coins inférieur gauche et supérieur droit et la troisième représente le rayon dans la direction verticale. Par exemple, le code suivant définira un élément div sur un cercle d'une largeur et d'une hauteur de 100 pixels.

div{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Dans ce code, la valeur de border-radius est de 50%, ce qui signifie que les quatre coins sont définis pour avoir un rayon égal à la moitié de la largeur et de la hauteur de l'élément, ce qui donne un cercle.

En plus d'utiliser l'attribut border-radius, on peut également utiliser les pseudo-éléments ::before et ::after pour réaliser un cercle. Nous pouvons définir un élément carré pour qu'il ait une largeur et une hauteur égales, puis le convertir en cercle en utilisant les pseudo-éléments ::before ou ::after. Par exemple, le code suivant définira un élément div en utilisant le pseudo-élément ::before sur un cercle d'une largeur et d'une hauteur de 100 pixels.

div{
  width: 100px;
  height: 100px;
  position: relative;
}
div::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

Dans ce code, nous définissons l'élément div sur un positionnement relatif, puis utilisons le pseudo-élément ::before pour le positionner de manière absolue dans le coin supérieur gauche de l'élément div. La largeur et la hauteur du pseudo-élément sont héritées de l'élément div et son rayon de coin est défini à 50 % à l'aide de la propriété border-radius, ce qui donne un cercle.

De plus, nous pouvons également utiliser la propriété transform en CSS3 pour faire pivoter l'élément carré de 45 degrés, puis utiliser la propriété overflow:hidden pour le recadrer en cercle. Par exemple, le code suivant définira un élément div sur un cercle d'une largeur et d'une hauteur de 100 pixels.

div{
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  overflow: hidden;
}
div::before{
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  margin: -50%;
  background-color: #000;
  border-radius: 50%;
}

Dans ce code, nous faisons pivoter l'élément div de 45 degrés et recadrons ses quatre coins à l'aide de l'attribut overflow:hidden. Nous utilisons ensuite le pseudo-élément ::before pour générer un cercle qui occupe tout l'élément et le déplaçons vers le point central de l'élément div, ce qui donne un cercle.

En bref, CSS fournit une variété de méthodes pour obtenir des effets circulaires, notamment en utilisant la propriété border-radius, les pseudo-éléments et les propriétés de transformation. Dans les projets réels, nous devons choisir la méthode appropriée en fonction de scénarios et de besoins spécifiques pour obtenir l'effet souhaité.

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!