CSSlinearer Gradient und radialer Gradient

Ich habe schon viele CSS3-Eigenschaften verwendet, sie aber bald vergessen, weil es schwierig ist, sich viele davon zu merken. Deshalb möchte ich einen Blog schreiben, um es einfacher zu machen, sie mir zu merken.
Lassen Sie mich zunächst den Linienverlauf erklären:
Hintergrundbild: linearer Farbverlauf (Richtung, Farbschritt1, Farbschritt2, ....)

• Richtung: Verwenden Sie den Winkel, um die Verlaufsrichtung anzugeben, deren Werte ein Winkel oder einer dieser Winkel sein können: nach links, nach rechts, nach oben, nach unten. nach unten (180 Grad) ist die Standardeinstellung. 
• Farbschritt: die Anfangsfarbe für den Farbverlauf, bestehend aus zwei Teilen: Farbe: gültiger CSS-Farbwert; Länge oder Prozentsatz: die Anfangsposition, negative Werte sind nicht zulässig

Beispiele (Höhe angenommen: 100 Pixel)
Hintergrund: linearer Farbverlauf (nach unten, Rot 0 %, Gelb 50 %, Grün 100 %); Gleiches gilt für den Hintergrund:linear-gradient(180deg, rot 0px, gelb 50px, grün 100px);


repeatng-linear-gradient(): Hintergrund: Repeating-linear-gradient(rot 0,rot 10%,gelb 10%,gelb 20%);


Diese Parameter repräsentieren 0 % – 10 % von Rot zu Rot, 10 % – 20 % von Gelb zu Gelb, und wiederholen Sie diesen Effekt, um die gesamte Elementgröße abzudecken.

radial-gradient()
Diese Funktionsparameter bestehen aus fünf Teilen: Form, Größe, Position des Kreismittelpunkts, Farbe, Farbposition.

• Form: Ellipse (Standard) oder Kreis;
• Größe: Ich nenne es lieber die zunehmende Richtung des Radius des radialen Gradienten mit möglichen Werten: am weitesten entfernte Ecke (Standard), am nächsten gelegene Ecke, am weitesten entfernte Seite, am nächsten gelegene Seite.
• Position: Die Mittelposition des radialen Farbverlaufs (50 %, 50 %) ist die Standardeinstellung;
• Farbe und Farbposition: identisch mit linearem Farbverlauf;

Dieser Effekt besteht darin, dass sich die Mittelposition bei (0,0) befindet und der Verlaufsradius gleich der Breite des Elements ist;

Und Repeating-Radial-Gradient() ist dasselbe wie Repeating-Linear-Gradient().

Schließlich gibt es noch die Kompatibilität von linear-gradient und radient-gradient (mehr dazu auf der CanIuse-Website)

Das obige ist der detaillierte Inhalt vonCSSlinearer Gradient und radialer Gradient. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!