CSS repeating-linear-gradient() funktion

Forrige side CSS repeating-conic-gradient() funktion
Neste side CSS repeating-radial-gradient() funktion
Gå tilbake til forrige nivå CSS funktion referenshandbok

Definition och användning

CSS repeating-linear-gradient() Funktion används för att upprepa linjär gradient.

Exempel:

Linjär gradient	Repetitiv linjär gradient

linear-gradient(red, yellow, blue);	repeating-linear-gradient(red, yellow 10%, blue 20%);

例

Exempel 1

En upprepad linjär tonfärgövergång:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Prova själv

Exempel 2

Olika upprepade linjära tonfärgövergångar:

#grad1 {
  background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
}
#grad2 {
  background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
}
#grad3 {
  background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
}

Prova själv

CSS syntax

repeating-linear-gradient(angle till side-or-corner, color-stop1, color-stop2, ...);

Värde	Beskrivning
angle	Definiera tonfärgens riktning i grader. Från 0deg till 360deg. Standardvärdet är 180deg.
side-or-corner	Definiera positionen för startpunkten för tonfärgen. Det består av två nyckelord: det första representerar horisontal riktning (vänster eller höger), det andra representerar vertikal riktning (topp eller botten). Ordningen spelar ingen roll och varje nyckelord är valfritt.
color-stop1, color-stop2,...	Färgändringar är de färger du vill visa en smidig övergång mellan. Detta värde består av färgvärden och ett eller två valfria stopppunkter (en procentandel mellan 0% och 100% eller längd längs tonfärgaxeln).

Värde

Beskrivning

angle

Definiera tonfärgens riktning i grader. Från 0deg till 360deg. Standardvärdet är 180deg.

side-or-corner

Definiera positionen för startpunkten för tonfärgen.

Det består av två nyckelord: det första representerar horisontal riktning (vänster eller höger), det andra representerar vertikal riktning (topp eller botten).

Ordningen spelar ingen roll och varje nyckelord är valfritt.

color-stop1, color-stop2,...

Färgändringar är de färger du vill visa en smidig övergång mellan.

Detta värde består av färgvärden och ett eller två valfria stopppunkter (en procentandel mellan 0% och 100% eller längd längs tonfärgaxeln).