Detaillierte Erläuterung der „Gradienten“-Kompatibilitätslösung in CSS3

Dieses Mal werden wir kurz auf die Kompatibilitätsprobleme unserer gängigen Farbverläufe in verschiedenen Browsern eingehen, bei denen es sich um ein relativ einfaches Problem handelt.
Zu den Browsern, mit denen wir vertraut sind, gehören Chrome, Firefox, Opera, Safari und die IE-Serie. Das grundlegendste Hintergrund:#ccccccAttribut gibt an, dass die Seite in der Farbe #cccccc gerendert wird. Dies ist natürlich in jedem Browser zufriedenstellend. Da jedoch unsere Anforderungen an die Farbe zunehmen, werden lineare Farbverläufe eingeführt, und verschiedene Browser müssen ihrem Verständnis unterschiedliche Präfixe hinzufügen. Aus dem obigen Beispiel können wir erkennen, dass Firefox: -moz-, chrome/safari/opera: -webkit-, dh: -ms-, viele Versionen von dh natürlich nicht akzeptieren, sodass es durch Filter verarbeitet werden kann .
Konzentrieren wir uns auf den Filtereffekt von zB:

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: einheitliche Form style=1: linear;
startx/starty/finishx/finishy: Koordinaten der Start- und Endpunkte;
Farbverlauf=1: horizontaler Farbverlauf;

-webkit-linear-gradient(top,#ffffff,#000000);
linear: Verlaufstyp
top: Startpunkt
#ffffff: Startfarbe
#000000 : Endpunktfarbe
Unterstützte Browser: Webkit(-webkit-), Gecko(-moz-), presto(-o-), Trident(-ms-)
Richtung:
'oben' oben ist der Ausgangspunkt und enthält auch „nach unten“
d06e9304e57be79c135406412263f1c8: 0 Grad bedeutet, dass die Richtung von links nach rechts verläuft, und 90 Grad bedeutet, dass die Richtung von unten nach oben verläuft. Kann durch negative Werte dargestellt werden, in entgegengesetzter Richtung zu positiven Werten.
Spitzenklasse: Einfach die Startrichtung angeben. Für zwei Richtungen fügen Sie einfach zwei Richtungsattribute hinzu, z. B. links oben.

ps: Es gibt noch relativ wenige andere Browser, die diese Änderungen nicht erfüllen. Für diese Situation können Sie eine geeignete Übergangsfarbe definieren, indem Sie den einfachsten Hintergrund verwenden: #rot oder ähnliches.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der „Gradienten“-Kompatibilitätslösung in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!