Unter Farbverlauf versteht man in CSS einen sanften Übergang zwischen zwei oder mehr Farben. Bisher mussten wir vordefinierte Bilder verwenden, um Farbverlaufseffekte zu erzielen.
Mit CSS3 können Sie drei Arten von Farbverläufen definieren, nämlich lineare Farbverläufe (erstellt durch die Funktion linear-gradient()), radiale Farbverläufe (erstellt durch die Funktion radial-gradient()) und konische Farbverläufe (erstellt durch die Funktion conic-gradient() Funktion erstellen). Darüber hinaus können Sie sich wiederholende Verläufe mithilfe der Funktionen „repeating-linear-gradient()“, „repeating-radial-gradient()“ und „repeating-conic-gradient()“ erstellen.
Mit CSS erstellte Verläufe sind nicht nur einfach und flexibel, sondern verkürzen auch die Ladezeit von Webseiten, indem der bei der Verwendung von Bildern erforderliche Ladevorgang entfällt. Darüber hinaus können mit CSS erstellte Verlaufselemente in jedem Maßstab vergrößert oder verkleinert werden, ohne an Qualität zu verlieren.
1. Linearer Gradient linear-gradient()
Ein linearer Farbverlauf bezieht sich auf einen Farbverlauf entlang einer geraden Linie (z. B. von rechts nach unten, von links nach rechts usw.). Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren (der Farbstopp bezieht sich auf). Um komplexere Verlaufseffekte zu erzeugen, müssen Sie mehr Farbstopps definieren. Die grundlegende Syntax zum Erstellen eines linearen Farbverlaufs lautet wie folgt:
linearer Farbverlauf (Richtung, Farbstopp1, Farbstopp2, ...);
Die Parameterbeschreibung lautet wie folgt:
Richtung ist ein optionaler Wert, der die Richtung des Farbverlaufs definiert (z. B. von links nach rechts, von oben nach unten). Es kann sich um einen bestimmten Winkel handeln (z. B. 90 Grad), oder Sie können Schlüsselwörter wie „links“ hinzufügen , rechts, oben, unten usw., um die Verlaufsrichtung anzugeben, zum Beispiel:
● nach links: bedeutet von rechts nach links, entspricht 270 Grad;
● nach rechts: bedeutet von links nach rechts, entspricht 90 Grad;
● nach oben: bedeutet von unten nach oben, entspricht 0 Grad;
● nach unten: Standardwert, der von oben nach unten zeigt, entspricht 180 Grad;
● nach rechts unten: bedeutet von links oben nach rechts unten;
● nach rechts oben: bedeutet von unten links nach oben rechts;
● nach links unten: bedeutet von rechts oben nach links unten;
● nach links oben: bedeutet von rechts unten nach links oben.
Farbstopp1, Farbstopp2, ...: Zeigt mehrere definierte Farbskalen an. Zusätzlich zur Definition der Farbe in jeder Farbskala können die Start- und Endpositionen der Farbe auch durch Hinzufügen eines Werts zu einer Einheit oder a definiert werden Prozentsatz.
[Beispiel] Verwenden Sie die Funktion linear-gradient(), um lineare Farbverläufe zu definieren:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{background:linear-gradient(torightbottom,red,blue70px);}. two{background:linear-gradient(190deg,#000,#FFF);}. three{background:linear-gradient(red,green,blue);}.four{background:linear-gradient(toright,red,orange, gelb, grün, blau, indigo, violett);</style></head><body><divclass=one></div><divclass=two></div><divclass=drei></div> <divclass=four></div></body></html>Laufergebnisse:
2. Radialer Gradient radial-gradient(); strahlt vom Mittelpunkt aus
Der Unterschied zwischen dem Typ „Radialer Farbverlauf“ und dem Typ „Linearer Farbverlauf“ besteht darin, dass der radiale Farbverlauf ein Farbverlauf ist, der sich von der Mitte nach außen erstreckt. Sie können die Position des Mittelpunkts angeben und die Form des Farbverlaufs festlegen. Die grundlegende Syntax zum Definieren eines radialen Farbverlaufs lautet wie folgt:
radial-gradient(shapesizeatposition,color-stop1,color-stop2,...);
Die Parameterbeschreibung lautet wie folgt:
(1) at: ein Schlüsselwort, das vor der Parameterposition platziert werden muss;
(2) Position: Geben Sie die Koordinaten des Startpunkts des Farbverlaufs an. Sie können die Koordinaten des Startpunkts des Farbverlaufs mithilfe eines Werts plus einer Einheit, eines Prozentsatzes oder eines Schlüsselworts (z. B. links, unten usw.) angeben. ). Wenn 2 Parameter angegeben werden, wird der erste Parameter verwendet. Stellt die Abszisse dar, und der zweite Parameter wird verwendet, um die Ordinate darzustellen. Wenn nur ein Parameter bereitgestellt wird, wird der zweite Parameter standardmäßig auf 50 % eingestellt Center;
(3) Form: Geben Sie die Form des Farbverlaufs an. Optionale Werte sind Kreis (Kreis) und Ellipse (Ellipse).
(4) Größe: Geben Sie die Größe der Verlaufsform an. Zusätzlich zur Verwendung spezifischer numerischer Werte zur Angabe des Kreis- und Ellipsenradius können Sie auch die unten aufgeführten Schlüsselwörter verwenden, um die Größe der Verlaufsform anzugeben:
●Nächste Seite: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Seite an, die dem Mittelpunkt des Kreises am nächsten liegt.
● Nächste Ecke: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Ecke an, die dem Mittelpunkt des Kreises am nächsten liegt.
●farthest-side: Standardwert, der die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Seite angibt, die am weitesten vom Mittelpunkt des Kreises entfernt ist;
● am weitesten entfernte Ecke: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur am weitesten vom Mittelpunkt des Kreises entfernten Ecke an.
(5) Farbstopp1, Farbstopp2, ...: Zeigt mehrere definierte Farbskalen an. Zusätzlich zur Definition der Farbe in jeder Farbskala können die Start- und Endpositionen der Farbe auch in Form eines numerischen Werts definiert werden plus Einheit oder Prozentsatz.
[Beispiel] Verwenden Sie die Funktion radial-gradient(), um einen radialen Farbverlauf zu definieren:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:radial-gradient(circleat50%,red, gelb, Limette);}.two{background:radial-gradient(ellipse100px30pxat30%,red,gelb,lime);}.drei{background:radial-gradient(circle100pxat50%,red10%,gelb50%,lime100px);}.four {background:radial-gradient(circleclosest-cornerat50px30px,red,yellow,lime);</style></head><body><divclass=one></div><divclass=two></div><divclass =drei></div><divclass=vier></div></body></html>Laufergebnisse:
3. Konischer Farbverlauf conic-gradient(); rotieren um den Mittelpunkt
Ein konischer Farbverlauf ähnelt einem radialen Farbverlauf. Der Unterschied besteht darin, dass der konische Farbverlauf um den Mittelpunkt rotiert (anstatt strahlenförmig vom Mittelpunkt auszugehen). Die Definition eines konischen Gradienten ist wie folgt:
conic-gradient(fromangleatposition,start-color,...,last-color);
Die Syntax wird wie folgt erklärt:
(1) from: ein Schlüsselwort, das vor dem Parameter angle platziert werden muss;
(2) Winkel: Definiert den Startwinkel des Kegelgradienten, der leer sein kann. Der Standardwert ist 0 Grad.
(3) at: ein Schlüsselwort, das vor der Parameterposition platziert werden muss;
(4) Position: Definieren Sie die Koordinaten der Kegelmitte des Kegelverlaufs. Sie können die Koordinaten der Kegelmitte mit einem Wert plus Einheit, einem Prozentsatz oder Schlüsselwörtern (z. B. links, unten usw.) angeben Wenn nur ein Parameter angegeben ist, wird der erste Parameter zur Darstellung der Abszisse und der zweite Parameter zur Darstellung der Ordinate verwendet.
(5) Startfarbe, ..., letzte Farbe: Zeigt mehrere definierte Farbskalen an. Zusätzlich zur Definition der Farbe in jeder Farbskala kann die Startposition der Farbe auch durch Prozentsatz oder Winkel definiert werden.
[Beispiel] Verwenden Sie conic-gradient(), um einen Kegelgradienten zu definieren:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:conic-gradient(at50%,red, orange, gelb, grün, blau, indigo, violett, rot);}.two{background:conic-gradient(red0deg30deg,orange30deg50deg,yellow50deg200deg,green200deg300deg,blue300deg360deg);}.two{background:conic-gradient(from90deg,red0% 55 %, gelb 55 % 90 %, Limette 90 % 100 %);}.vier{/*Umdrehungen. Ein Kreis hat insgesamt 1 Drehung 90deg=100grad=0.25turn≈1.570796326794897rad*/background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000.75turn);}< /style> </head><body><divclass=one></div><divclass=two></div><divclass=drei></div><divclass=four></div></body> </html >Laufergebnisse:
4. Wiederholter Gradient Repeating-Linear-Gradient ()
In CSS können Sie auch Funktionen wie „repeating-linear-gradient()“, „repeating-radial-gradient()“ und „repeating-conic-gradient()“ verwenden, um sich wiederholende Verläufe aus linearen Verläufen, radialen Verläufen bzw. konischen Verläufen zu erstellen. Beim sogenannten Wiederholen des Farbverlaufs wird der Farbverlauf mehrmals wiederholt, um das gesamte Element abzudecken.
Tipp: Die Syntax der Funktionen „repeating-linear-gradient()“, „repeating-radial-gradient()“ und „repeating-conic-gradient()“ ist dieselbe wie die Syntax der Funktionen „linear-gradient()“, „radial-gradient()“ , und conic-gradient() funktionieren jeweils gleich.
[Beispiel] Verwenden Sie die drei Funktionen „repeating-linear-gradient()“, „repeating-radial-gradient()“ und „repeating-conic-gradient()“, um sich wiederholende Verläufe zu definieren:
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:repeating-linear-gradient(190deg,# 0000px10px,#FFF10px20px);}.two{background:repeating-radial-gradient(circle100pxat50%,red0%10%,gelb10%30%,lime30%40%);}.two{background:repeating-conic-gradient(# 69f036deg,#fd44ff36deg72deg);}.four{background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000.75turn)topleft/25%25%repeat;}</style ></head><body><divclass=one></div><divclass=two></div><divclass=drei></div><divclass=four></div></body></ html>Laufergebnisse:
