Functions

Draft

<gradient>gradientrepeating-radial-gradient([<string>shape,] <color>color-spot1 <length>,<percentage>rate, <color>color-spot2 <length>,<percentage>rate[, ..])

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

설명

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

구문

background-image:repeating-radial-gradient(color-stop1rate,color-stop2rate[,..])기본형식CSS3
색상 값 다음에 공백을 주고 적용되는 요소의 크기에 대한 색상 위치를 비율 또는 절대 범위로 설정해 색상의 간격을 조정할 수 있다.
background-image:repeating-radial-gradient(shape,color-stop1rate,color-stop2rate[,..])기본형식CSS3
첫 번째 인수로 원형의 타입을 설정하고 그 이후의 인수는 색조로 적용할 두개 이상의 색상을 정의한다. 원형의 타입은 'ellipse', 'circle'이 있다.

매개 변수

<string>shape선택
기본값 ellipse
그라디언트의 모양을 ellipse, circle 값 중에서 설정한다. 기본 값은 ellipse(타원)이다.
<color>color-spot1필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate필수
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.
<color>color-spot2필수
CSS에서 가능한 색상 설정 방법으로 그라디언트 시작 색상 값을 설정한다.
<length>,<percentage>rate필수
그라데이션을 형성하는 색상 범위를 상대적인 '%' 또는 절대적인 'px'를 사용하여 설정한다. 적용 범위 기준은 요소의 크기이다.
<length>,<percentage>,<repeating>add직전값 반복

반환

<gradient>gradient

지원 웹브라우저

예제

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