CSS repeating-linear-gradient() functie

Vorige pagina CSS repeating-conic-gradient() functie
Volgende pagina CSS repeating-radial-gradient() functie
Ga een niveau omhoog CSS Functie Referentiemanual

Definitie en gebruik

CSS repeating-linear-gradient() De functie wordt gebruikt voor herhalende lineaire verlopen.

Voorbeeld:

lineaire verloop	herhalende lineaire verloop

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

实例

Voorbeeld 1

Een herhalende lineaire geleidelijke overgang:

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

Probeer het zelf uit

Voorbeeld 2

Verschillende herhalende lineaire geleidelijke overgangen:

#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%);
}

Probeer het zelf uit

CSS syntaxis

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

Waarde	Beschrijving
angle	Definieert het richtingshoek van de verloop. Van 0grad tot 360grad. Standaardwaarde is 180grad.
side-or-corner	Definieert de positie van het beginpunt van de verlooplijn. Het bestaat uit twee sleutels: de eerste geeft de horizontale richting aan (links of rechts), de tweede de verticale richting (boven of beneden). De volgorde is niet belangrijk en elke sleutel is optioneel.
color-stop1, color-stop2,...	Kleur-eindpunten zijn de kleuren die u wilt laten weergeven met een gladde overgang. Deze waarde bestaat uit kleurwaarden en één of twee optionele stopposities (percentage tussen 0% en 100% of de lengte langs de verloopas).

Waarde

Beschrijving

angle

Definieert het richtingshoek van de verloop. Van 0grad tot 360grad. Standaardwaarde is 180grad.

side-or-corner

Definieert de positie van het beginpunt van de verlooplijn.

Het bestaat uit twee sleutels: de eerste geeft de horizontale richting aan (links of rechts), de tweede de verticale richting (boven of beneden).

De volgorde is niet belangrijk en elke sleutel is optioneel.

color-stop1, color-stop2,...

Kleur-eindpunten zijn de kleuren die u wilt laten weergeven met een gladde overgang.

Deze waarde bestaat uit kleurwaarden en één of twee optionele stopposities (percentage tussen 0% en 100% of de lengte langs de verloopas).