CSS 원형 변화

CSS 원형 변화

원형 그레이더드는 중심에 의해 정의됩니다.

원형 그레이더드를 생성하려면, 최소 두 개의 색상 표시기를 정의해야 합니다.

문법

background-image: radial-gradient(shape size at 위치, start-color, ... , last-color);

기본적으로shape 椭圆形에 대해size 가장 먼角에 대해위치 중심.

원형 그레이더드 - 일정한 간격의 색상 표시기(기본)

아래 예제는 일정한 간격으로 색상 표시기가 있는 원형 그레이더드를 보여줍니다:

예제

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

직접 시험해 보세요

원형 그레이더드 - 다른 간격의 색상 표시기

아래 예제는 색상 표시기 간의 간격이 다른 원형 그레이더드를 보여줍니다:

예제

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

직접 시험해 보세요

형태 설정

shape 파라미터는 형태를 정의합니다. circle 또는 ellipse 값을 받을 수 있습니다. 기본 값은 ellipse(椭圆形)입니다.

아래 예제는 원형 원형 그레이더드를 보여줍니다:

예제

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

직접 시험해 보세요

다른 크기 키워드 사용

size 파라미터는 그레이더드의 크기를 정의합니다. 네 가지 값을 받을 수 있습니다:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

예제

설정된 다른 size 키워드의 원형 그레이더드:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

직접 시험해 보세요

반복된 원형 변화

repeating-radial-gradient() 반복된 원형 변화를 위한 함수는 다음과 같습니다：

예제

반복된 원형 변화：

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

직접 시험해 보세요

CSS 변화 단계 속성

다음 표는 CSS 변화 단계 속성을 나열합니다：

속성 설명
background-image 요소에 하나 이상의 배경 이미지를 설정합니다.