Comment utiliser la fonction CSS CONIC-GRADIENT ()?

Conic-Gradient () crée une transition de couleur conique tournant autour du point central, adapté aux graphiques circulaires, aux roues de couleur ou aux conceptions circulaires décoratives implémentées dans des CS purs; 1. Contrairement à linéaire-gradient () et à gradient radial (), les couleurs sont disposées dans le sens horaire à partir du haut le long du cercle; 2. La syntaxe de base est en arrière-plan: gradient conique (Color1, Color2, ...); 3. L'angle de départ peut être réglé à partir de (), comme à partir de 45deg; 4. Utiliser le pourcentage d'échelles de couleur pour contrôler chaque plage de couleurs de segment, comme le rouge 0 70% signifie que le rouge représente 70% de circonférence; 5. Créez des lacunes entre les segments en insérant des segments de couleur transparente ou d'arrière-plan (tels que 1%); 6. combinant la taille de l'arrière-plan et la position d'arrière-plan, il peut simuler les effets du graphique du cycle; 7. Il est soutenu par des navigateurs modernes, mais pas par IE. Il peut détecter les fonctionnalités via @Supports et fournir des styles alternatifs; Cette méthode peut réaliser une visualisation simple des données sans images ou JavaScript, qui est complète et efficace.

La fonction conic-gradient() dans CSS est utilisée pour créer un gradient qui tourne autour d'un point central, avec des couleurs transitionnant dans un motif circulaire en forme de cône. Il est particulièrement utile pour créer des graphiques circulaires, des roues de couleur ou des conceptions radiales décoratives directement dans CSS - pas d'images ou de javascript requis.

Voici comment l'utiliser efficacement.

Ce que fait conic-gradient()

Contrairement à linear-gradient() (qui va côte à côte) ou radial-gradient() (qui se propage vers l'extérieur d'un centre), conic-gradient() place les couleurs autour d'un cercle, à partir du haut et se déplaçant dans le sens des aiguilles d'une montre.

Syntaxe de base:

 Contexte: Gradient conique (Color1, Color2, ...);

Exemple:

 div {
  Largeur: 200px;
  hauteur: 200px;
  CONTEXTE: GRADIEUR CONIQUE (rouge, jaune, citron vert, bleu);
  Border-Radius: 50%;
}

Cela crée un gradient circulaire qui ressemble à une roue chromatique tranchée en quatre sections.

Contrôler l'angle de départ et la rotation

Par défaut, le gradient commence en haut (0deg). Vous pouvez modifier cela en utilisant la syntaxe from() .

 CONTEXTE: GRADIEUR DE CONIQUE (de 45 degrés, rouge, bleu, vert);

Cela tourne tout le gradient, il commence donc à 45 degrés (haut-droit).

Vous pouvez également définir combien chaque couleur prend en spécifiant les arrêts de couleur:

 Contexte: Gradient conique (à partir de 90 degrés, rouge 0 25%, jaune 25% 50%, chaux 50% 75%, bleu 75% 100%);

Cela crée quatre tranches égales à 90 degrés, à partir du côté droit.

? Pensez à chaque couleur comme occupant un "coin" - le pourcentage définit la quantité de cercle qu'il couvre.

Créer un graphique à tarte avec un gradient conique

Vous pouvez simuler un graphique à secteurs en attribuant des arrêts de couleur de précision.

Exemple: un graphique à secteurs avec 70% rouge, 20% jaune, 10% vert:

 .pie {
  Largeur: 200px;
  hauteur: 200px;
  Border-Radius: 50%;
  Contexte: gradient conique (
    rouge 0 70%,
    jaune 70% 90%,
    vert 90% 100%
  ));
}

Pas de HTML ou JS supplémentaires - juste des CS purs. Idéal pour les visualisations de données simples.

Ajouter des lacunes ou des frontières entre les segments

Pour ajouter de l'espace entre les tranches (comme un graphique de beignets avec des lacunes), utilisez plusieurs arrière-plans ou des ombres de calque, mais une astuce plus simple consiste à insérer des segments contrastés minces:

 Contexte: gradient conique (
  rouge 0 69%,
  transparent 69% 70%,
  jaune 70% 89%,
  transparent 89% 90%,
  vert 90% 99%,
  transparent 99% 100%
));

Cela crée 1% de lacunes transparentes entre chaque couleur - utilisez un blanc ou une couleur d'arrière-plan au lieu de transparent si vous voulez des bordures visibles.

Combinez avec background-size et border-radius

Pour faire apparaître le dégradé apparaît comme un anneau (style de beignet), vous pouvez le superposer sur un autre arrière-plan:

 .Donut {
  Largeur: 200px;
  hauteur: 200px;
  Border-Radius: 50%;
  arrière-plan: 
    gradient conique (rouge 0 30%, jaune 30% 70%, chaux 70% 100%),
    blanc; / * Couleur centrale * /
  taille arrière: 80% 80%; / * Rétrécir le gradient pour créer un trou * /
  Position d'arrière-plan: Centre;
  République de fond: sans répétition;
}

Alternativement, utilisez une astuce pseudo-élément ou rembourrage pour un véritable effet d'anneau.

Prise en charge du navigateur et secours

conic-gradient() est pris en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge), mais pas dans Internet Explorer .

Si vous avez besoin de secours:

 .retomber {
  Contexte: rouge; / * Couleur de secours * /
  Contexte: Gradient conique (rouge, bleu);
}

Ou utilisez @supports pour la détection des fonctionnalités:

 @Supports (arrière-plan: gradient conique (rouge, bleu)) {
  .Chart {Background: Conic-Gradient (rouge, bleu); }
}

Fondamentalement, conic-gradient() est puissante pour les conceptions circulaires lorsque vous avez besoin de mariages de couleur. Utilisez-le avec border-radius: 50% pour les cercles, des tranches de contrôle avec des pourcentages d'arrêt et modifiez l'angle de démarrage au besoin. Ce n'est pas pour tout le monde, mais quand vous avez besoin d'une tranche de tarte rapide ou d'une roue chromatique, c'est étonnamment capable.

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!