CSS repeating-linear-gradient() funktion

Definition og brug

CSS repeating-linear-gradient() Funktion bruges til gentag linear gradient.

Eksempel:

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

eksempel

Eksempel 1

En gentagen lineær gradient:

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

Prøv det selv

Eksempel 2

Forskellige gentagne lineære graderinger:

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

Prøv det selv

CSS syntaks

repeating-linear-gradient(vinkel til side-or-corner, color-stop1, color-stop2, ...);
Værdi Beskrivelse
vinkel Definerer gradientens retningens vinkel. Fra 0deg til 360deg. Standardværdien er 180deg.
side-or-corner

Definerer positionen for startpunktet af gradientlinjen.

Det består af to nøgleord: det første repræsenterer lodret retning (left eller right), og det andet repræsenterer vandret retning (top eller bottom).

Rekkefølgen er irrelevant, og hver nøgleord er valgfri.
color-stop1, color-stop2,...

Farvetermink点是您希望在其中呈现平滑过渡的颜色。

Værdien består af farveværdier og en eller to valgfri stoppositioner (procentværdier mellem 0% og 100% eller længder langs gradientaksen).

Tekniske detaljer

Version: CSS Images Module Level 3

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter funktionen.

Chrome Edge Firefox Safari Opera
repeating-linear-gradient()
26 10 16 6.1 12.1
to farveres terminpunkter på to placeringer
71 79 64 12.1 58

Relaterede sider

Tilføje:CSS gradient

Reference:CSS background-image egenskab

Reference:CSS conic-gradient() funktion

Reference:CSS linear-gradient() funktion

Reference:CSS radial-gradient() funktion

Reference:CSS repeating-conic-gradient() funktion

Reference:CSS repeating-radial-gradient() funktion