Demo für 10-Farbverlaufshintergrund des CSS-Containers (linear-gradient())

Grammatik

Hintergrund: linearer Farbverlauf (Richtung, Farbstopp1, Farbstopp2, …);

• direction : Gibt die Richtung (oder den Winkel) des Farbverlaufs mithilfe eines Winkelwerts an.
• color-stop1,color-stop2,... : Wird verwendet, um die Start- und Endfarben des Farbverlaufs festzulegen.

HINWEIS: Es werden mindestens zwei Farben benötigt.

Der Erste

Hintergrund: linearer Farbverlauf (nach links, #d3959b, #bfe6ba);

nach links legt den Farbverlauf von rechts to left fest, was 270deg entspricht.

Der Zweite

Hintergrund: linearer Farbverlauf (nach rechts, #d3959b, #bfe6ba);

to right legt den Farbverlauf von links nach rechts fest, was 90deg entspricht.

Der dritte

Hintergrund: linearer Farbverlauf (nach oben, #d3959b, #bfe6ba);

to top legt den Farbverlauf von unten nach oben fest, was 0deg entspricht.

Der vierte

Hintergrund: linearer Farbverlauf (nach unten, #d3959b, #bfe6ba); 

Der fünfte

Hintergrund: linearer Farbverlauf (nach oben rechts, #d3959b, #bfe6ba);

nach rechts oben to right top = to top right , diagonaler Winkel

Der Sechste

Hintergrund: linearer Farbverlauf (45 Grad, #d3959b, #bfe6ba);

Es gibt einen kleinen Unterschied zwischen „ to top right und „to top right“ (es gibt keinen Unterschied, wenn der Hintergrund ein Quadrat ist).

Der siebte

Hintergrund: linearer Farbverlauf (45 Grad, #d3959b 20 %, #bfe6ba);

Gibt die Startfarbposition in Prozent an. Der Standardwert ist 0% .

Der achte

Hintergrund: linearer Farbverlauf (nach rechts, #feac5e, #c779d0, #4bc0c8); 

Neunte

Hintergrund: linearer Farbverlauf (45 Grad, #feac5e, #c779d0, #4bc0c8); 

Der zehnte

Hintergrund: linearer Farbverlauf (45 Grad, RGBA (254,172,94,0,5), RGBA (199,121,208,0,5), RGBA (75,192,200,0,5)); 

rgba verwendet eine Deckkraft von 0.5 .

Dies ist das Ende dieses Artikels über die Demo des 10-Farbverlaufs für CSS-Container-Hintergrund (linear-gradient()). Weitere verwandte Inhalte zum Farbverlauf für CSS-Container-Hintergrund finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!