CSS repeating-conic-gradient() 함수

정의와 사용법

CSS repeating-conic-gradient() 함수는 반복 구형 점진을 사용합니다.

예제:

구형 점진 반복 구형 점진
conic-gradient(red, yellow); repeating-conic-gradient(red 10%, yellow 20%);

인스턴스

예제 1

반복 원형 변화:

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

직접 경험해보세요

예제 2

색상 시작점과 종료점을 정의한 반복 원형 변화:

#grad {
  background-image: repeating-conic-gradient(red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

직접 경험해보세요

예제 3

시작 각도와 중심 위치를 설정한 다른 설정된 반복 원형 변화:

#grad1 {
  background-image: repeating-conic-gradient(from 10deg at 30% 30%, red 0 30deg, yellow 30deg 60deg, blue 60deg 90deg);
}

직접 경험해보세요

CSS 문법

repeating-conic-gradient([from 각도][at 위치,] 색상 도, 색상 도, ... );
값 설명
from 각도

선택 사항. 전체 원형 변화가 이 각도로 회전합니다.

기본 값은 0deg입니다.
at 위치

선택 사항. 원형 변화의 중심점을 지정합니다.

기본 값은 center입니다.
색상 도, ... , 색상 도

색상 종료点是 그 간에 부드러운 전환을 표시하고 싶은 색상입니다.

이 값은 색상 값과 1개 또는 2개의 선택 사항 중지 위치(0에서 360도 사이의 각도 또는 0%에서 100% 사이의 백분율)로 구성됩니다.

기술 세부 사항

버전: CSS Images Module Level 4

브라우저 지원

표의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
69 79 83 12.1 56

관련 페이지

교재:CSS 기하학적 변화

참조:CSS background-image 속성

참조:CSS conic-gradient() 함수

참조:CSS linear-gradient() 함수

참조:CSS radial-gradient() 함수

참조:CSS 반복선형 그래디언트() 함수

참조:CSS repeating-radial-gradient() 함수