-o-radial-gradient() CSS fonction

Définition de la CSS -o-radial-gradient().

La fonction de Dégradé radial CSS -o-radial-gradient de la propriété d'Image de fond CSS permet de spécifier le dégradé de couleur radial à appliquer sur l'arrière-plan d'un élément (X)HTML.
La fonction de Dégradé radial CSS -o-radial-gradient utilise l'ancienne syntaxe des spécifications CSS de dégradés de 17 février 2011.

Exemple de syntaxe CSS -o-radial-gradient() :
background-image  : -o-radial-gradient(10px 50%, circle, #258dc8 0%, #258dc8 100%);
background-image  : -o-radial-gradient(top left, ellipse farthest-corner, #258dc8 0%, #258dc8 100%);
background : -o-radial-gradient(center, ellipse, #258dc8 0%, #258dc8 100%);

La fonction de Dégradé radial CSS -o-radial-gradient(position, forme findegrade, liste de couleurs) peut prendre comme paramètres de dégradé :



La valeur de findegrade CSS peut prendre la valeur de :
  • closest-side : la fin du dégradé s'arrête le bord le plus proche de la position du centre du dégradé radial.
  • closest-corner : la fin du dégradé s'arrête au coin le plus proche de la position du centre du dégradé radial.
  • farthest-side : la fin du dégradé s'arrête le bord le plus éloigné de la position du centre du dégradé radial.
  • farthest-corner : la fin du dégradé s'arrête au coin le plus éloigné de la position du centre du dégradé radial.
  • contain : identique à closest-side, supprimée de spécification Css3.
  • cover : identique à farthest-corner, supprimée de spécification Css3.

La valeur de position CSS peut prendre la valeur de (origine coin haut gauche de l'élément):
  • numerique numerique : première valeur correspond à sa position sur l'axe X et la seconde correspond à sa position sur l'axe Y. X et Y sont suivis d'une unité de longueur CSS. Si une seule valeur, cela revient à mettre deux valeurs identiques.
  • top left ou left top : revient à placer le centre du dégradé radial en '0% 0%'.
  • top : place le centre du dégradé radial en '50% 0%'.
  • top center ou center top : place le centre du dégradé radial en '50% 0%'.
  • right top ou top right : place le centre du dégradé radial en '100% 0%'.
  • left : place le centre du dégradé radial en '0% 50%'.
  • left center ou center left : place le centre du dégradé radial en '0% 50%'.
  • center ou center center : place le centre du dégradé radial en '50% 50%'. Valeur par défaut.
  • right : place le centre du dégradé radial en'100% 50%'.
  • right center, ou center right : place le centre du dégradé radial en '100% 50%'.
  • bottom left ou left bottom : place le centre du dégradé radial en '0% 100%'.
  • bottom : place le centre du dégradé radial en '50% 100%'.
  • bottom center, ou center bottom : place le centre du dégradé radial en '50% 100%'.
  • bottom right ou right bottom : place le centre du dégradé radial en '100% 100%'.

Conditions d'application de la CSS -o-radial-gradient().

La fonction de Dégradé radial CSS -o-radial-gradient() est applicable avec la propriété d'Arrière-plan CSS et avec la propriété d'Image de fond CSS .
Vous pouvez utiliser la fonction de Dégradé radial CSS partir de Opéra 12+.

Problème d'interprétation de -o-radial-gradient() en Css.

La fonction de Dégradé radial CSS -o-radial-gradient() pose des problèmes, car elle n'est reconnue que par Opéra 11.1+ à 12.

Compatibilités navigateurs de la fonction -o-radial-gradient()

Détails des versions de la CSS -o-radial-gradient()
Résumé du support navigateurs de la CSS -o-radial-gradient()

Fonction Css non préfixée de -o-radial-gradient().

-o-radial-gradient() CSS est une version préfixée de la propriété de feuille de style radial-gradient CSS pour le navigateur Opera.

Reportez-vous au chapitre "Propriétés préfixées" de propriété Css radial-gradient pour voir les autres propriétés Css préfixées équivalentes, aussi que le code Css pour avoir un maximum de support navigateurs.

Votre avis sur la définition -o-radial-gradient() en CSS

Votez pour la définition CSS -o-radial-gradient()

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/o-radial-gradient-css-fonction.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.