Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3

Vorwort

In der Demonstration [IE9-] ist der Farbverlauf der alten Browserversion implementiert;
Vor IE9 wurden alle Farbverläufe über Filter implementiert und die allgemeine Schreibweise war folgendermaßen:

.testDiv {
		Breite: 400px;
		Höhe: 400px;
		Rand: 1px durchgezogen #f00;
		/*
		So schreiben Sie IE-Filter;
		Gradiententyp: 1 steht für die horizontale Richtung, 0 steht für den vertikalen linearen Farbverlauf.
		startColorstr ist die Startfarbe, endColorstr ist die Endfarbe;
		Farben unterstützen hexadezimale Notation oder englische Wörter. Natürlich wird auch Transparenz unterstützt [hexadezimal]

		#AAFF0000 [AA steht für Transparenz (00 ist völlig transparent, FF ist völlig undurchsichtig)], die letzten sechs Ziffern entsprechen der standardmäßigen hexadezimalen Farbschrift;
		 */
		
		/*IE6~7*/

	    Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    /*IE8*/
	    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ccff7700", endColorstr="#eeccc222", GradientType=1);
	    

	}

Der Effekt ist wie folgt: horizontaler Farbverlauf und hellere Farbe, transparent ist eingestellt

Geben Sie hier die Bildbeschreibung ein

Dieser Artikel stellt hauptsächlich die native Implementierung von Verlaufseffekten unter CSS3 vor!!! [Mainstream-Browser und mobile Browser können beliebig verwendet werden]

Kompatibilität mit linearen Farbverläufen in CSS3

Geben Sie hier die Bildbeschreibung ein

Standardsyntax (enthält zwei Parameter, der erste Parameter kann ein Winkel oder eine englische Richtung sein, der zweite ist der Farbverlaufsstart, mehrere Farbwerte sind erlaubt!)

Farbverlauf: ([Richtung oder Winkel], Startwertfarbe)
Die Schreibweise von Firefox/Chrome/MS/Opera wurde standardisiert, und die vorherigen Versionen müssen mit einem Präfix versehen werden
firefox(-moz-)/chrome(-webkit-)/microsoft(-ms)/opera(-o-) [Die vier Präfixe entsprechen den vier Parsing-Engines. Ich habe sie so geschrieben, um die Browser der Vergangenheit darzustellen. Opera verwendet jetzt beispielsweise die Blink-Engine von Google.]

### Gradientenwinkel (Grad ist die Abkürzung für Grad, was Winkel bedeutet)

Von unten nach oben: nach oben = 0 Grad || 360 Grad
Von oben nach unten: oben unten = 180 Grad || -180 Grad
Von links nach rechts: oben links = -90 Grad || 270 Grad
Von rechts nach links: nach rechts = 90 Grad || -270 Grad
Von unten rechts nach oben links: nach oben links = 315 Grad || -45 Grad
Von unten links nach oben rechts: nach oben rechts = -315 Grad || 45 Grad
Von oben rechts nach unten links: nach unten links = 225 Grad || -135 Grad
Von oben links nach unten rechts: nach unten rechts = 135 Grad || -225 Grad
Tipps: Es wird empfohlen, Winkel zur Standardisierung zu verwenden. Einige Safari-Browser mit englischer Ausrichtung verwenden möglicherweise eine andere Analyse als andere Browser.

Rendern

Geben Sie hier die Bildbeschreibung ein

Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <style type="text/css" media="Bildschirm">
    div {
        Breite: 200px;
        Höhe: 200px;
        Rand: 1px durchgezogen #ccc;
        Box-Größe: Rahmenbox;
        Textausrichtung: zentriert;
        Zeilenhöhe: 200px;
        schweben: links;
        Rand: 10px;
    }
    /*
			Meine Klassennamen hier sind Abkürzungen:
			du:oben,
			d: nach unten,
			l:links,
			r:richtig,
			b:unten,
			2: zu;
			Positive Winkel verlaufen im Uhrzeigersinn, negative gegen den Uhrzeigersinn. Der Winkel stellt dar, wenn er einen bestimmten Winkel erreicht und beginnt, sich auf andere Bereiche auszubreiten.
			Ich war am Anfang auch verwirrt, aber nachdem ich mehr geschrieben hatte, habe ich es gelernt.
			Als ich diesen Artikel schrieb, waren die Spezifikationen des Gradientenstandards vollständiger und viele von ihnen erforderten keine Präfixe.
			Um das mobile Endgerät zu berücksichtigen, kann WebKit nicht verworfen werden */
    
    .u2d {
        Hintergrund: -webkit-linear-gradient(180 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (180 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .d2u {
        Hintergrund: -webkit-linear-gradient(0 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (0 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .l2r {
        Hintergrund: -webkit-linear-gradient(90 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (90 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .r2l {
        Hintergrund: -webkit-linear-gradient(-90 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (-90 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .rb2lu {
        Hintergrund: -webkit-linear-gradient(-45 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (-45 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .lb2ru {
        Hintergrund: -webkit-linear-gradient(45 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (45 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .ru2lb {
        Hintergrund: -webkit-linear-gradient(-135 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (-135 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .lu2rd {
        Hintergrund: -webkit-linear-gradient(135 Grad, #590BCC, #18CC6C);
        Hintergrund: linearer Farbverlauf (135 Grad, Nr. 590BCC, Nr. 18CC6C);
    }
    
    .mclg1 {
        Hintergrund: -webkit-linear-gradient(135 Grad, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
        Hintergrund: linearer Farbverlauf (135 Grad, #D6C4F0, #F6B5B5, #18CC6C, #1AB25E);
    }
    
    .mclg2 {
        Hintergrund: -webkit-linear-gradient(135 Grad, #1FB4DC, #18CC6C, #8B1A1A, #677C67, #BED128);
        Hintergrund: linearer Farbverlauf (135 Grad, #1FB4DC, #18CC6C, #8B1A1A, #677C67, #BED128);
    }
    
    .mclg3 {
        Hintergrund: webkit-linear-gradient(135 Grad, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
        Hintergrund: linearer Farbverlauf (135 Grad, #590BCC, #18CC6C, #B5D821, #22CB33, #BA8787, #050201);
    }
    
    .mclg4 {
        Hintergrund: -webkit-linear-gradient(-135 Grad, rgba(20,20,20,.9), rgba(50,50,50,.6), rgba(60,125,70,.7), rgba(150,150,150,.8), rgba(200,200,200,.9), rgba(80,125,6,.75), rgba(175,75,75,.5));
        Hintergrund: linearer Farbverlauf (-135 Grad, rgba (20,20,20, 0,9), rgba (50,50,50, 0,6), rgba (60,125,70, 0,7), rgba (150,150,150, 0,8), rgba (200,200,200, 0,9), rgba (80,125,6, 0,75), rgba (175,75,75, 0,5));
    }
    </Stil>
</Kopf>

<Text>
    <div class="u2d">Von oben nach unten</div>
    <div class="d2u">Von unten nach oben</div>
    <div class="l2r">Von links nach rechts</div>
    <div class="r2l">Von rechts nach links</div>
    <div class="rb2lu">Von der unteren rechten Ecke zur oberen linken Ecke</div>
    <div class="lb2ru">Von links unten nach rechts oben</div>
    <div class="ru2lb">Obere rechte Ecke bis untere linke Ecke</div>
    <div class="lu2rd">Obere linke Ecke bis untere rechte Ecke</div>
    <div class="mclg1">Vier Farbverläufe</div>
    <div class="mclg2">Fünf Farbverläufe</div>
    <div class="mclg3">Sechs Farbverläufe</div>
    <div class="mclg4">Farbe mit transparentem Farbverlauf</div>
</body>

</html>

Zusammenfassen

Mit dem Aufkommen von CSS3 müssen lineare Farbverläufe nicht mehr ausschließlich auf PS angewiesen sein, um realisiert zu werden ... Front-End-Partner können auch selbst alle möglichen coolen Farbverlaufseffekte erstellen!!! Hahahahaha~~~

Dies ist das Ende dieses Artikels über den detaillierten Beispielcode zur Implementierung eines linearen Farbverlaufs in CSS3. Weitere relevante Inhalte zu linearen Farbverläufen in CSS3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Einführung in integrierte JavaScript-Objekte

>>: Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist

Detaillierte Erläuterung des MySQL InnoDB-Sekundärindex-Sortierbeispiels

Detaillierte Erklärung des Codes zur Implementierung linearer Farbverläufe mit CSS3

Detaillierte Erläuterung des MySQL InnoDB-Sekundärindex-Sortierbeispiels

Zusammenfassung der Erfahrungen mit der Verwendung des Div-Box-Modells

JavaScript, um den Effekt des Klickens auf das selbst erstellte Menü zu erzielen

Native JS-Implementierung der Slider-Intervallkomponente

Heute werde ich einige seltene, aber nützliche JS-Techniken teilen

Vollständige Analyse des Vue-Diff-Algorithmus

So deaktivieren Sie die automatische Eingabeaufforderung zum Speichern des Kennworts im Chrome-Browser

Lösung für verstümmelte chinesische Schriftzeichen beim Bedienen einer MySQL-Datenbank in CMD

So installieren Sie MySQL 5.7 aus dem Quellcode in einer CentOS 7-Umgebung

Setzen Sie den Eingang auf schreibgeschützt über deaktiviert und schreibgeschützt

Artikel empfehlen

CentOS 8.0.1905 installiert ZABBIX Version 4.4 (verifiziert)

Echarts-Tutorial zur Implementierung von Baumdiagrammen

Vue3 + TypeScript-Entwicklungszusammenfassung

Zwei Lösungen für das Problem, dass MySQL in bedingten Anweisungen nur eine Information liest

Vue implementiert grafischen Überprüfungscode

Detaillierte Erläuterung des Implementierungsbeispiels für die Gruppenrangfolge im MySQL-Tutorial

Analysieren der häufig verwendeten v-Anweisungen in vue.js

DIV-Hintergrund, halbtransparenter Text, nicht durchscheinender Stil

React-Implementierungsbeispiel mit Amap (react-amap)

Eine kurze Analyse zum besten Umgang mit vergessenen MySQL 8-Passwörtern

Detaillierte Erläuterung der praktischen Anwendung der Centos7 ESXi6.7-Vorlage

Detailliertes Tutorial zur Installation von Prometheus mit Docker

MySQL-Operationen: Operationen mit JSON-Datentyp

So erstellen Sie einen neuen Benutzer in CentOS und aktivieren die Schlüsselanmeldung

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %