Comment puis-je créer un dégradé linéaire multi-navigateur ?

Utilisation du dégradé linéaire sur tous les navigateurs

Pour obtenir un dégradé linéaire entre navigateurs, il est essentiel de tenir compte des différences entre les navigateurs. Voici les alternatives pour Opera et Internet Explorer (IE) :

Opera

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

Internet Explorer

IE < 10

/*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)";

IE10

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

Modification en dégradé horizontal

Pour créer un dégradé horizontal, utilisez la direction gauche ou droite au lieu du haut ou du bas.

Préfixes CSS expérimentaux

Notez que les propriétés CSS expérimentales utilisent des préfixes pour indiquer de quel navigateur il s'agit. destiné à :

• -webkit- pour les navigateurs Webkit (Chrome, Safari)
• -moz- pour Firefox
• -o- pour Opera
• -ms- pour Internet Explorer

Filtre dégradé Microsoft Syntaxe

Pour IE, la syntaxe -ms-filter est la suivante :

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
    startColorStr='#0c93c0', /*Start color*/
    endColorStr='#FFFFFF',   /*End color*/
    GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

GradientType est facultatif et peut être omis.

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!