Comment puis-je implémenter des dégradés linéaires compatibles avec plusieurs navigateurs ?

Implémentation de dégradés linéaires dans divers navigateurs

Compatibilité entre navigateurs

Problème : Obtenir la compatibilité entre navigateurs pour un linéaire dégradé spécifié comme suit :

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Alternatives Opera et IE :

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);  
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

Dégradés verticaux ou horizontaux

Pour modifier les dégradés pour qu'ils soient horizontaux au lieu de vertical, utilisez les valeurs suivantes pour les points de début et de fin :

top left
top right

Pour exemple :

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF);
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF);
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF);
background-image:      -o-linear-gradient(top, #0C93C0, #FFF);
background-image:         linear-gradient(top, #0C93C0, #FFF);

Internet Explorer < 10

Pour les versions d'Internet Explorer antérieures à 10, utilisez le code suivant :

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

Explication

• Les préfixes sont utilisés pour les propriétés CSS expérimentales :

  • -webkit- pour les navigateurs Webkit (Chrome, Safari)
  • -moz- pour Firefox
  • -o- pour Opera
  • -ms- pour Internet Explorer
• linéaire- un dégradé sans préfixe indique une conformité totale avec le CSS spécification.

Référence

• [MDN : Linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear -dégradé)

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!