Informationen zum CSS3-Hintergrundverlauf

Was CSS3-Verläufe betrifft, bieten die gängigen Browser derzeit keine gute Unterstützung, daher müssen wir die wichtigsten Browser-Präfixe hinzufügen, wenn wir sie verwenden.

-moz-: Browser mit Mozilla-Kern (Firefox-Browser)

-webkit-: Browser, die den Webkit-Kern verwenden (Chrome-, Safari-Browser)

-o-: Browser mit Opera-Kern (Opera-Browser)

Ich werde hier nicht zu viel über IE vorstellen, und IE wird in diesem Artikel nicht für den Verlauf der Hintergrundfarbe berücksichtigt

1. Linearer Gradient

1.Syntax: -moz-linear-gradient(/,,……)

Parameter: Der erste Parameter ist die Richtung des linearen Gradienten

Oben: von oben nach unten;

Links: von links nach rechts;

Rechts: von rechts nach links;

unten: von unten nach oben;

Es kann auch paarweise kombiniert werden, zum Beispiel von oben links: links oben, von oben rechts: rechts oben usw., ich werde hier nicht zu viel vorstellen

Winkel stellt einen Winkel dar (ich habe immer gedacht, dass ein ebenes rechtwinkliges Koordinatensystem mit Winkeln intuitiv genug ist).

Der zweite Parameter und der dritte Parameter sind die Farben des Startpunkts bzw. des Endpunkts. Sie können auch weitere Parameter dazwischen einfügen, um den Farbverlauf mehrerer Farben darzustellen, oder Sie können verwenden rgb(a)-Werte

Beispiel: Hintergrund:-moz-linear-gradient(top,#000,#fff);

Hinweis: Stellt den Farbverlauf von #000 bis #fff dar

Hintergrund:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

Hinweis: 0-50 % ist #000, 50 %-100 % ist #555

2.

Syntax: -webkit-linear-gradient(/,,...) [Neue Grammatik-Schreibregeln]

　 -webkit-gradient(,/,/,,

Die neuen Grammatik-Schreibregeln sind die gleichen wie andere, daher werde ich sie hier nicht zu oft vorstellen. Hier sind die alten Grammatikregeln:

Parameter

: Der erste Parameter stellt den Verlaufstyp dar, der linear (linear) oder radial (radial) sein kann;

Der zweite Parameter und der dritte Parameter stellen den Startpunkt und den Endpunkt des Farbverlaufs dar, bei denen es sich um Koordinaten oder Schlüsselwerte handeln kann Der vierte und fünfte Parameter stellen die Farbe des Startpunkts bzw. des Endpunkts dar. Weitere Parameter können dazwischen eingefügt werden, um den Farbverlauf mehrerer Farben darzustellen. Die Farbe unterstützt auch die hexadezimale numerische Darstellung und kann auch als RGB verwendet werden. a) Wert.

Beispiel: Hintergrund:-webkit-gradient(linear,links oben,links unten,von(#fff),bis(#000));

Hinweis: Stellt den Farbverlauf von oben nach unten dar, von #fff bis #000

Hintergrund:-webkit-gradient(linear,0 0,100 % 100 %, color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)) );

Hinweis: Von links oben nach rechts unten sind 0–50 % Weiß und 50 %–100 % Schwarz mit einer Transparenz von 0,2

3.

Syntax: -o-linear-gradient(/,,……)

Beispiel: Hintergrund:-moz-linear-gradient(top,#000,#fff);

Hinweis: Stellt den Farbverlauf von #000 bis #fff dar Zwei. Radialer Verlauf

Syntax: -moz-radial-gradient(/,/,,…… );

　

-webkit-radial-gradient(/,/,,……);

Die Unterstützung für radiale Farbverläufe im Oprea-Browser ist noch nicht sehr gut, daher werde ich sie hier nicht vorstellen. Zusätzlich zu der tatsächlichen Position, Richtung und Farbe, die in linearen Farbverläufen zu sehen sind, können Sie bei radialen Farbverläufen die Form des Farbverlaufs angeben: Kreis und Ellipse und die Größe: nächstgelegene Seite, nächstgelegene Ecke, am weitesten entfernte Seite, am weitesten entfernte Ecke , enthalten, abdecken. Es gibt kaum Unterschiede zwischen diesen Einstellungsgrößen, was etwas verwirrend ist.

Beispiel:Hintergrund:

Radial-

Gradient(#fff, #000

);

　Hintergrund: -Webkit-Radial-Gradient(#fff, #000);

Hinweis: bedeutet aus Weiß Kreisförmiger Farbverlauf zu Schwarz

Hintergrund: -moz-radial-gradient(80% 20%, most-corner, #fff, #000);

Hintergrund: -webkit-radial-gradient(80% 20%, most-corner, #fff, #000);

Hinweis: Dies bedeutet, dass bei einer Position von 80 % zu 20 % ein Farbverlauf vom weißen Kreis zum schwarzen Kreis vorhanden ist

2.css-Wiederholungsverlauf

Syntax: -moz-repeating-linear-gradient(/,,…);

-webkit-repeating-linear-gradient(/,,...);

　 -o-repeating-linear-gradient(/,,……);

　-moz-radial-gradient(/,/,,……);

　-webkit-radial-gradient(/,/,,……);

Beispiel: Hintergrund: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

　Hintergrund: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px);

Hinweis: Es stellt einen Kreis aus schwarzen und weißen Kreisen dar (nicht zu schwindlig sein)

Dieser Artikel ist ein Auszug aus Da Mos Blog http://www.w3cplus.com/content/css3-gradient