Fonction CSS conic-gradient()

Définition et utilisation

CSS conic-gradient() La fonction met le dégradé conique en tant que image de fond.

Le dégradé conique est une transition de couleur qui tourne autour du point central (comme dans un饼图 et un cercle chromatique).

Pour créer un dégradé conique, il faut au moins définir deux points d'arrêt de couleur.

Exemple de dégradé conique :

Exemple

Exemple 1

Il y a trois couleurs dans la dégradé conique :

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Essayez-le vous-même

Exemple 2

Il y a cinq couleurs dans la dégradé conique :

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Essayez-le vous-même

Exemple 3

Il y a trois couleurs et pour chaque couleur, on spécifie un angle de dégradé conique :

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

Essayez-le vous-même

Exemple 4

En ajoutant border-radius: 50%, la dégradé conique ressemble à un饼图 :

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Essayez-le vous-même

Exemple 5

Gradien conique avec angle de départ :

#grad {
  background-image: conic-gradient(de 90deg, rouge, jaune, vert);
  border-radius: 50%;
}

Essayez-le vous-même

Exemple 6

Gradien conique avec position centrale :

#grad {
  background-image: conic-gradient(à 60% 45%, rouge, jaune, vert);
  border-radius: 50%;
}

Essayez-le vous-même

Exemple 7

Gradien conique avec angle de départ et position centrale :

#grad {
  background-image: conic-gradient(de 90deg à 60% 45%, rouge, jaune, vert);
  border-radius: 50%;
}

Essayez-le vous-même

Exemple 8

Un autre exemple de diagramme circulaire :

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Essayez-le vous-même

Syntaxe CSS

background-image: conic-gradient([de angle] position,] degré de couleur, degré de couleur, ... );

Détails techniques

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement cette fonction pour la première fois.

Pages associées

Tutoriel :Dégradé CSS

Référence :Attribut background-image CSS

Référence :Fonction CSS linear-gradient()

Référence :Fonction CSS radial-gradient()

Référence :Fonction CSS repeating-conic-gradient()

Référence :Fonction CSS repeating-linear-gradient()

Référence :Fonction repeating-radial-gradient() CSS