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

Codebeispiel für die Linux-SSH-Serverkonfiguration

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

Artikel

Verwenden von js zur Realisierung eines dynamischen Hintergrunds

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

Codebeispiel für die Linux-SSH-Serverkonfiguration

Zusammenfassung der Wissenspunkte zum Ereignismodul in Node.js

Vue + Openlayer realisiert den Drag- und Rotationsverformungseffekt von Grafiken

Die 10 wichtigsten zeitsparenden Tipps zur Verkürzung der Web-App-Entwicklung (grafisches Tutorial)

Fehlerbehebung bei MySQL-Datenverlust

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

Verwenden von js zur Realisierung eines dynamischen Hintergrunds

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

mysql Backup-Skript und halten Sie es für 7 Tage

Artikel empfehlen

Vue verwendet Filter zum Formatieren von Daten

Ubuntu kompiliert Kernelmodule und der Inhalt wird im Systemprotokoll angezeigt

Bestimmen Sie anhand von Beispielen, ob das MySQL-Update die Tabelle sperrt

Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat

Zusammenfassung der DTD-Verwendung in HTML

Diskussion zum Problem der Initialisierung von Iframe-Knoten

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

So stellen Sie per SSH eine Verbindung zum Docker-Server her

Schritte zum Upgrade des Ubuntu 16.04-Kernels

Eine Codezeile zeigt Ihnen, wie Sie Linux-Prozesse verbergen

So installieren Sie ein Linux-System (Redhat8) und die Netzwerkkonfiguration virtueller Maschinen in VMware

Zusammenfassung einiger gängiger Protokolle in MySQL

Umfassendes Verständnis der HTML-Grundstruktur

So führen Sie py-Dateien direkt unter Linux aus

Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?