Explication détaillée de la solution de compatibilité "dégradé" en CSS3

Cette fois, nous parlerons brièvement des problèmes de compatibilité de nos dégradés communs dans différents navigateurs, ce qui est un problème relativement simple.
Les navigateurs que nous connaissons incluent Chrome, Firefox, Opera, Safari et les séries IE. Le background:#ccccccattribut indique que la page sera rendue en couleur #cccccc. Bien sûr, cela est satisfaisant dans n'importe quel navigateur. Cependant, à mesure que nos exigences en matière de couleur augmentent, des dégradés linéaires sont introduits et différents navigateurs doivent ajouter différents préfixes à leur compréhension. À partir de l'exemple ci-dessus, nous pouvons savoir que firefox:-moz-, chrome/safari/opera:-webkit-, ie:-ms-, bien sûr, de nombreuses versions de ie ne l'acceptent pas, il peut donc être traité par des filtres .
Concentrons-nous sur l'effet de filtre, c'est-à-dire :

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);

style=0 : forme unifiée ; style=1 : linéaire style=2 : style=3 : rectangulaire ;
startx/starty/finishx/finishy : coordonnées des points de départ et d'arrivée
gradient=1 : dégradé horizontal ; 0 : dégradé vertical.

-webkit-linear-gradient(top,#ffffff,#000000);
linéaire : type de dégradé
haut : point de départ
#ffffff : couleur de départ
#000000 : Couleur du point final
Navigateurs pris en charge : Webkit(-webkit-), Gecko(-moz-), presto(-o-), Trident(-ms-)
Direction :
'top' dans ce qui précède est le point de départ et contient également 'vers bas'
0c0cb308ee3d2ee3281772bfc9b806c2 : 0deg signifie que la direction est de gauche à droite et 90deg signifie que la direction est de bas en haut. Peut être représenté par des valeurs négatives, dans le sens opposé aux valeurs positives.
première classe : donnez simplement la direction de départ. Pour deux directions, ajoutez simplement deux attributs de direction, tels que left top.

ps : Il existe encore relativement peu d'autres navigateurs qui ne respectent pas ces changements. Pour cette situation, vous pouvez définir une couleur de transition appropriée en utilisant l'arrière-plan le plus basique : #red ou similaire.

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!