CSS repeating-radial-gradient() 함수

정의와 사용법

CSS repeating-radial-gradient() 반복 원형 연속 변화를 위한 함수.

원형 연속 변화	반복 원형 연속 변화

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

반복적인 원형 연속 변화:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

형태 크기와 위치를 설정한 또 다른 반복적인 원형 기울기:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

두 개의 색상 종료 위치를 설정한 또 다른 반복적인 원형 기울기:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

값	설명
shape	정의하는 기울기 형태. ellipse(기본) circle
size	정의하는 기울기 크기. farthest-corner(기본) closest-side closest-corner farthest-side
at position	정의하는 기울기 위치.
start-color, ... , last-color	색상 종료点是您希望在其间呈现平滑过渡的颜色。 이 값은 색상 값과 하나 또는 두 개의 선택 사항적인 종료 위치(0%에서 100% 사이의 퍼센트 또는 기울기 축의 길이)로 구성됩니다.

버전：	CSS Images Module Level 3

표中的数字表示首个完全支持该函数的浏览器版本。

크롬	에지	파이어폭스	사파리	오페라
repeating-radial-gradient()
26	10	16	6.1	12.1
두 위치의 색상 종료점
71	79	64	12.1	58