CSS repeating-linear-gradient() 함수

정의와 사용법

CSS repeating-linear-gradient() 반복적인 선형 그레이딩을 위한 함수

예제:

선형 그레이딩 반복적인 선형 그레이딩
linear-gradient(red, yellow, blue); repeating-linear-gradient(red, yellow 10%, blue 20%);

예제

예제 1

반복 선형 그레이드 하나:

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

직접 시도해 보세요

예제 2

다른 반복 선형 그레이드:

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

직접 시도해 보세요

CSS 문법

repeating-linear-gradient(angle to side-or-corner, color-stop1, color-stop2, ...);
값 설명
angle 그레이드 방향의 각도를 정의합니다. 0deg에서 360deg 사이입니다. 기본 값은 180deg입니다.
side-or-corner

그레이드 선의 시작 위치를 정의합니다.

그것은 두 키워드로 구성되어 있습니다: 첫 번째 키워드는 수평 방향(left 또는 right)을 나타내며, 두 번째 키워드는 수직 방향(top 또는 bottom)을 나타냅니다.

순서는 중요하지 않으며, 각 키워드는 선택 사항입니다.
color-stop1, color-stop2,...

색상 종료점은 그림자를 통해 평滑한 전환을 표시하고자 하는 색상입니다.

이 값은 색상 값과 한 개 또는 두 개의 선택 사항적인 중지 위치(0%에서 100% 사이의 퍼센트 또는 그레이드 축의 길이)로 구성됩니다.

기술 세부 사항

버전： CSS Images Module Level 3

브라우저 지원

표中的数字表示首个完全支持该函数的浏览器版本。

크롬 에지 파이어폭스 사파리 오페라
repeating-linear-gradient()
26 10 16 6.1 12.1
두 위치의 색상 종료점
71 79 64 12.1 58

관련 페이지

教程：CSS 渐变

참조:CSS background-image 속성

참조:CSS 광각 그레이드() 함수

참조:CSS 선형 그레이드() 함수

참조:CSS 원형 그레이드() 함수

참조:CSS 리필링-콘릭-그래디언트() 함수

참조:CSS 리필링-라디얼-그래디언트() 함수