CSS 원추형 그라디언트
CSS 원추형 그라디언트
원추형 그라디언트는 중심점을 중심으로 회전된 색상 전환이 있는 그라디언트입니다.
원뿔형 그라디언트를 생성하려면 최소한 두 가지 색상을 정의해야 합니다.
통사론
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
기본적으로 각도 는 0도이고 위치 는 중심입니다.
정도 를 지정 하지 않으면 색상이 중심점을 중심으로 균일하게 퍼집니다.
원추형 그라디언트: 세 가지 색상
다음 예는 세 가지 색상의 원추형 그라디언트를 보여줍니다.
예시
세 가지 색상의 원뿔형 그라디언트:
#grad {
background-image: conic-gradient(red, yellow, green);
}
원추형 그라디언트: 5가지 색상
다음 예는 5가지 색상의 원추형 그라디언트를 보여줍니다.
예시
5가지 색상의 원뿔형 그라디언트:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
원추형 그라디언트: 3가지 색상 및 각도
다음 예는 세 가지 색상과 각 색상에 대한 차수가 있는 원추형 그라디언트를 보여줍니다.
예시
세 가지 색상과 각 색상의 차수가 있는 원추형 그라디언트:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
파이 차트 만들기
border-radius: 50%원뿔형 그라디언트가 파이처럼 보이도록 추가 하기만 하면 됩니다.
예시
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
다음은 모든 색상에 대해 정의된 정도가 있는 또 다른 원형 차트입니다.
예시
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
각도에서 지정된 원뿔형 그라데이션
[from angle ]은 전체 원추형 그래디언트가 회전하는 각도를 지정합니다.
다음 예는 시작 각도가 90도인 원추형 기울기를 보여줍니다.
예시
시작 각도가 있는 원추형 그라디언트:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
지정된 중심 위치의 원추형 그라데이션
[at position ]은 원뿔형 기울기의 중심을 지정합니다.
다음 예는 중심 위치가 60% 45%인 원추형 기울기를 보여줍니다.
예시
지정된 중심 위치의 원추형 기울기:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
원뿔형 그라디언트 반복
이 repeating-conic-gradient()함수는 원뿔 기울기를 반복하는 데 사용됩니다.
예시
반복되는 원뿔 기울기:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
다음은 정의된 색상 시작 및 색상 중지가 있는 반복되는 원추형 그라디언트입니다.
예시
정의된 색상 시작 및 색상 중지가 있는 반복되는 원추형 그라디언트:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS 그라디언트 함수
다음 표에는 CSS 그래디언트 함수가 나열되어 있습니다.
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |