CSS 방사형 그라디언트
CSS 방사형 그라디언트
방사형 그래디언트는 중심으로 정의됩니다.
방사형 그래디언트를 생성하려면 최소한 두 개의 색상 정지점도 정의해야 합니다.
통사론
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
기본적으로 모양은 타원, 크기는 가장 먼 모서리, 위치는 중앙입니다.
방사형 그라디언트 - 균일한 간격의 색상 중지(기본값)
다음 예는 균일한 간격의 색상 정지점이 있는 방사형 그라디언트를 보여줍니다.
예시
#grad {
background-image: radial-gradient(red, yellow, green);
}
방사형 그라디언트 - 서로 다른 간격의 색상 정지점
다음 예는 서로 다른 간격의 색상 정지점이 있는 방사형 그라디언트를 보여줍니다.
예시
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
모양 설정
모양 매개변수는 모양을 정의합니다. 값 원 또는 타원을 사용할 수 있습니다. 기본값은 타원입니다.
다음 예는 원 모양의 방사형 그래디언트를 보여줍니다.
예시
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
다양한 크기의 키워드 사용
크기 매개변수는 그라디언트의 크기를 정의합니다. 네 가지 값을 사용할 수 있습니다.
- 가장 가까운 쪽
- 가장 먼 쪽
- 가장 가까운
- 가장 구석
예시
다양한 크기의 키워드가 있는 방사형 그래디언트:
#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);
}
방사형 그라데이션 반복
repeat-radial-gradient() 함수는 방사형 그래디언트를 반복하는 데 사용됩니다.
예시
반복되는 방사형 그라디언트:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}