함수 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,
방사형 그라데이션을 생성합니다.