함수 repeating-radial-gradient

함수 repeating-radial-gradient는 반복되는 방사형 그라데이션을 지정합니다. 이는 예를 들어, 0px부터 10px까지 빨간색에서 파란색으로 변하는 특정 그라데이션 패턴을 설정하면, 이 그라데이션이 블록 전체에 반복됩니다: 0px부터 10px까지, 10px부터 20px까지, 20px부터 30px까지, 이런 식으로 계속됩니다.

이 함수는 radial-gradient와 동일한 매개변수들을 사용하며, 차이점은 반복 효과뿐입니다. 사용 가능한 매개변수들은 radial-gradient 설명을 참조하세요.

문법

선택자 {
	background: repeating-radial-gradient([모양 종류 위치], 색상1 크기1, 색상2 크기2...);
}

예제

동심원:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

예제

동심 타원:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
	width: 400px;
	height: 200px;
}

예제

동심원을 중앙이 아닌 가장자리에 배치:

<div id="elem"></div>

#elem {
	background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
	width: 400px;
	height: 200px;
}

같이 보기

함수 repeating-linear-gradient,
반복되는 선형 그라데이션을 생성합니다.
함수 linear-gradient,
선형 그라데이션을 생성합니다.
함수 radial-gradient,
방사형 그라데이션을 생성합니다.