Repeating-conic-gradient() - Fonction CSS
Résumé des caractéristiques de la fonction repeating-conic-gradient()
Description de la fonction repeating-conic-gradient().
La fonction repeating-conic-gradient() définit un dégradé de couleurs conique avec répétition.
Pour que la répétition se déclenche, le dégradé doit être dimensionné sur moins de un tour (360 degrés).
Dégradé sans répétition : la couleur finale (bleu ciel sur cet exemple) est utilisée pour compléter le remplissage.
Dégradé avec répétition : le motif du dégradé est répété sur les 360 degrés d'un tour complet.
Reportez-vous à la page les dégradés de couleurs pour une présentation générale des trois types de dégradés : linéaire, radial et conique.
La fonction repeating-conic-gradient() peut être utilisée avec :
background-image: Image d'arrière-plan.border-image-source: Définit l'image utilisée pour construire la bordure.image-set(): Propose au navigateur un choix d'images.list-style-image: Définit une image à utiliser à la place des puces.mask-image: Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
Syntaxe de la fonction repeating-conic-gradient().
- background: repeating-conic-gradient(blue 0%, pink 10%, blue 20%); c1 p1 c2 p2 c3 p3
Ceci est un exemple de syntaxe pour la fonction
repeating-conic-gradient().Les différentes syntaxes sont identiques à celles de la fonction
conic-gradient.
Exemples avec des dégradés coniques répétés.
Un bouton en aluminium
Ce bouton n'est pas une image mais la combinaison de deux dégradés.
Un maillage en osier
Enfin, en tout cas, quelque chose qui suggère l'osier.
Simulateur.
Compatibilité et prise en charge suivant les navigateurs.
Tous les navigateurs actuels traitent correctement les dégradés coniques, les dégradés répétitifs et la fonction repeating-conic-gradient().
repeating-conic-gradient().
répétitifs
coniques
repeating-conic-gradient()Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la fonction repeating-conic-gradient().
-
Module CSS - Images et contenu remplacé
Introduction des dégradés coniques, et donc des fonctionconic-gradient()etrepeating-conic-gradient().
11 Septembre 2012Document de travail.
Voir aussi : manipulations d'images.
La fonction repeating-conic-gradient() est décrite dans la spécification "module CSS - Images" (CSS Images Module).
Les définitions suivantes sont également décrites dans ce même module.