Comment puis-je créer des dégradés linéaires compatibles avec plusieurs navigateurs en CSS3 ?

Dégradés linéaires multi-navigateurs en CSS3

Créer des dégradés linéaires en CSS3 est un jeu d'enfant, mais la compatibilité entre navigateurs peut être un défi. Les navigateurs Webkit (Chrome et Safari) et Firefox utilisent une syntaxe différente de celle d'Opera et d'Internet Explorer.

Alternatives Webkit et Firefox

La syntaxe Webkit et Firefox fournie crée un dégradé linéaire diagonal du coin supérieur droit au coin inférieur gauche. Voici comment obtenir ce même dégradé avec Opera et Internet Explorer :

<br>background-image : -ms-linear-gradient(right, #0c93C0, #FFF); <br>image d'arrière-plan : -o-linear-gradient(right, #0c93C0, #FFF);<br>

Dégradés horizontaux multi-navigateurs

Pour créer un dégradé horizontal, remplacez la direction "haut" par l'un ou l'autre "gauche" ou "droite".

Internet Explorer

Pour les versions d'Internet Explorer inférieures à 10, vous devrez utiliser la propriété filter :

<br>/<em>IE7-</em>/ filtre : progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);<br>/<em>IE8 </em>/ -ms-filter : "progid:DXImageTransform.Microsoft .Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";<br>

-ms-Filter Syntaxe

La syntaxe -ms-filter est la suivante :

<br>-ms-filter : progid:DXImageTransform.Microsoft.Gradient(</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

Copier après la connexion

);

Vous pouvez également utiliser les formats de couleurs ARGB, où FF représente opaque et 00 représente transparent.

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!