Functions

Draft

<gradient>gradientrepeating-linear-gradient([<angle>angle|<string>direction,] <color>color-stop1 <length>,<percentage>rate, <color>color-spot2 <length>,<percentage>rate[, ..])

반복되는 선형 그라디언트를 생성한다.

설명

기본적으로 linear-gradient() 함수와 그라데이션을 생성하는 방식은 동일하지만 요소의 영역에 무한으로 그라데이션으로 반복된다. 그라데이션으로 사용될 색을 설정시 범위를 지정해 줘야 반복되는 패턴으로 적용시킬 수 있다.

구문

background-image:repeating-linear-gradient(color-stop1rate,color-stop2rate[,..])기본형식CSS3
색상 값 다음에 공백을 주고 적용되는 요소의 크기에 대한 색상 위치를 비율로 설정해 색상의 간격을 조정할 수 있다.
background-image:repeating-linear-gradient(angle,color-stop1rate,color-stop2rate[,..])기본형식CSS3
각도가 적용된 방향으로 그라데이션을 적용한다. 첫번째 인수를 단위 'deg'를 사용한 각도를 설정하고 나머지 인수들은 원하는 색상을 설정한다.
background-image:repeating-linear-gradient(direction,color-stop1rate,color-stop2rate[,..])기본형식CSS3
방향을 지정하여 그라데이션을 적용한다. 첫번째 인수로 지정된 방향 값을 설정하고 나머지 인수들은 원하는 색상을 설정한다.

매개 변수

<angle>angle선택
그라데이션 방향을 나타내는 0~360 사이의 각도
<string>direction선택
설정할 수 있는 값은 'left', 'top', 'right', 'bottom' 이며 대각선 방향으로 설정하고자 하는 경우에는 'left top', 'right bottom' 등의 방식으로 설정한다.
<color>color-stop1필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate필수
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.
<color>color-spot2필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate필수
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.

반환

<gradient>gradient

지원 웹브라우저

예제

다양한 인수 설정 방식으로 반복된 선형 그라데이션 적용 테스트