Beispielhafte Einführung von zwei Arten von Farbverläufen in CSS3

Dieser Artikel bietet Ihnen eine beispielhafte Einführung in zwei Arten von Farbverläufen in CSS3. Ich hoffe, dass er für Freunde hilfreich ist.

css3
ps: CSS wird immer mehr zu einer Sprache. CSS hat bereits Variablen. Ich habe es gerade im Dokument gesehen. Eine experimentelle Funktion.

Verlauf

Der Verlauf ist in zwei Arten von Verläufen unterteilt, einer ist ein linearer Verlauf und der andere ein radialer Verlauf.

Linearer Verlauf

Der lineare Verlauf verläuft nach oben , zwei Verlaufsmodi: nach unten, links und rechts.

linear-gradient()-Funktion

Dies ist eine Funktion von CSS. Ein linearer Farbverlauf besteht aus einer Achse, der Farbverlaufslinie. Jeder Punkt darauf hat zwei oder mehr Farben. Jeder Punkt auf seiner Achse hat eine unabhängige Farbe. Um einen gleichmäßigen Farbverlauf zu erzeugen, erstellt diese Funktion auch eine Reihe von Schattierungslinien. Die Farbe jeder Schattierungslinie hängt auch vom Farbpunkt der Verlaufslinie ab, die sie senkrecht schneidet.

// 渐变轴45度，重蓝色到红色linear-gradient(45deg, blue, red);

// 从右下到左上，蓝色渐变到红色linear-gradient(to left top, blue, red);

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red)

ps-Transparenz ist der letzte Parameter von rgba

radialer Gradient

Der radiale Farbverlauf besteht aus seinem Mittelpunkt, der Kantenform, dem Umriss, seiner Position und dem Endpunkt des Farbwerts.
Der radiale Gradient besteht aus kontinuierlichen Ellipsen

Der erste Parameter

Der erste Parameter kann im Allgemeinen weggelassen werden,

nächste Seite

nächste Ecke

nächste Seite

am weitesten entfernt -Ecke

Kreis in Prozent

Separat schreiben

Prozentzeichen

Empfohlene verwandte Artikel:

CSS3-Animationsattribute: Einführung in Transformationsattribute

CSS3-Animationseigenschaften: Einführung in die Animationseigenschaft

Das obige ist der detaillierte Inhalt vonBeispielhafte Einführung von zwei Arten von Farbverläufen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!