Detaillierte Erläuterung der CSS3-Syntax für lineare Farbverläufe (Codebeispiel)

Dieser Artikel enthält eine detaillierte Erläuterung der CSS3-Syntax für lineare Farbverläufe (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Vollständige Syntax für linearen Farbverlauf:

.demo  {   
    background: linear-gradient(to left, black, white);
}

Wirkung:

Kompatibilitätsschreiben:

Um den linearen Farbverlauf auf alle unterstützten Browser anwendbar zu machen, können Sie Folgendes tun:

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
	
	/* Safari 4 +，Chrome 2+  */
	background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
	
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(right, black, white);
	
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(right, black, white);
	
	/* Opera 11.1 - 12.0 */
	background: -o-linear-gradient(right, black, white);
	
	/* 标准的语法 */
	background: linear-gradient(to left, black, white);
	
}

Der Effekt ist wie oben gezeigt.

Verlaufswinkel oder Startpunkt

Ein linearer Verlauf ist ein Verlauf, der durch die Angabe einer geraden Verlaufslinie und die anschließende Platzierung mehrerer Farben entlang dieser Linie erstellt wird . Wir können eine Richtung für den Farbverlauf angeben, indem wir ihn festlegen.

Wir können die Richtung der Verlaufslinie auf zwei Arten festlegen:

1. Geben Sie den für den Verlauf verwendeten Winkel an.

2. Verwenden Sie Schlüsselwörter, um dem Browser mitzuteilen, wo Beginnt der Farbverlauf?

Im obigen Beispiel sagen wir ihm, dass er von rechts beginnen und nach links gehen soll , was dem Winkel „-90 Grad“ entspricht. Dies führt also zum gleichen Ergebnis:

background: linear-gradient(-90deg, black, white);

Rendern:

Das gleiche Ergebnis wird auch angezeigt, wenn Sie den Winkel „270 Grad“ verwenden entspricht „-90 Grad“.

Wir können also eines der Positionsschlüsselwörter (oben, rechts, links, unten) verwenden oder ihm einfach einen bestimmten Winkel numerisch zuweisen und es wird herausfinden, wo es anfangen soll.

Endfarbe und -position

Endposition

Mit einem einfachen linearen Farbverlauf können Sie einfach Es sind zwei Abschlussfarben ohne Angabe einer Position erforderlich (wie im Beispiel oben). Aber im folgenden Beispiel:

background: linear-gradient(-90deg, black 50%, white 100%);

werden wir feststellen, dass dadurch die Position jeder Farbe in den Prozentwert einbezogen wurde.

Rendering:

Dies teilt dem Browser mit, wo der Farbverlauf jeder Farbe beginnen und enden soll (und gibt die Länge der Farbe an). Der Browser erkennt natürlich den tatsächlichen Farbverlauf; Sie sagen ihm einfach, wo die „allmähliche Änderung“ vollständig „enden“ soll. Im obigen Beispiel würde der „Farbverlauf“ auf der linken Seite des Elements enden, sodass Sie in diesem Element nicht viel (wenn überhaupt) volles Weiß sehen.

Endfarbe

Das Hinzufügen von Farbblöcken ist nicht mehr sehr kompliziert, fügen Sie einfach eine beliebige Anzahl durch Kommas getrennter Werte hinzu. Dies ist das CSS des Regenbogens:

.demo  {
   background:linear-gradient(to bottom,red 0%,orange 15%,yellow 30%,green 45%,blue 60%,indigo 75%,violet 100%)  ;
}

Rendering:

Einige Hinweise zu linearen Farbverläufen:

1. Der CSS3-Verlauf ist kein Attribut, sondern ein vom Browser gerendertes Bild.

2 Sie können Verläufe an jeder Position in CSS verwenden ;

3. Die Syntax zum Erstellen eines Farbverlaufs ist eigentlich eine Funktion, die verschiedene Werte als Parameter akzeptiert.

4 Sie können auch wiederholte lineare Farbverläufe angeben in einigen Fällen sehr nützlich;

Der Wert der Farbendposition kann in Prozent oder Pixeln ausgedrückt werden.

6. ) und Prozentsätze über 100 % sind vollkommen gültig.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS3-Syntax für lineare Farbverläufe (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!