CSS의 그라데이션은 두 개 이상의 색상 사이의 부드러운 전환을 의미합니다. 과거에는 그라데이션 효과를 얻기 위해 미리 정의된 이미지를 사용해야 했습니다. CSS3은 그라데이션 효과를 얻기 위한 유연한 솔루션을 제공합니다.
CSS3를 사용하면 세 가지 유형의 그라디언트, 즉 선형 그라디언트(linear-gradient() 함수를 통해 생성됨), 방사형 그라디언트(radial-gradient() 함수를 통해 생성됨) 및 원뿔형 그라디언트(conic-gradient()를 통해 생성됨)를 정의할 수 있습니다. 함수 생성). 또한, 반복-선형-그라디언트(), 반복-방사형-그라디언트() 및 반복-원뿔-그라디언트() 함수를 사용하여 반복 그라디언트를 만들 수 있습니다.
CSS를 통해 생성된 그라디언트는 간단하고 유연할 뿐만 아니라, 이미지 사용 시 필요한 로딩 과정을 없애 웹페이지 로딩 시간을 절약해줍니다. 또한 CSS로 생성된 그래디언트 요소는 품질 저하 없이 어떤 규모로든 확대하거나 축소할 수 있습니다.
1. 선형 그래디언트 선형-그라디언트()
선형 그라데이션은 직선(예: 오른쪽 위에서 아래로, 왼쪽에서 오른쪽으로 등)을 따르는 색상 그라데이션을 의미합니다. 선형 그라데이션을 만들려면 두 개 이상의 색상 중지점을 정의해야 합니다(색상 중지점은 원활하게 전환하려는 색상) 더 복잡한 그라데이션 효과를 만들려면 더 많은 색상 중지점을 정의해야 합니다. 선형 그래디언트를 생성하는 기본 구문은 다음과 같습니다.
선형 그라데이션(방향, 색상 정지1, 색상 정지2,...);
매개변수 설명은 다음과 같습니다:
방향은 그라데이션 방향(예: 왼쪽에서 오른쪽으로, 위에서 아래로)을 정의하는 선택적 값이거나 특정 각도(예: 90도)일 수도 있고 왼쪽과 같은 추가 키워드를 사용할 수도 있습니다. , 오른쪽, 위쪽, 아래쪽 등을 사용하여 그라데이션 방향을 나타냅니다. 예:
● 왼쪽으로: 오른쪽에서 왼쪽으로, 270deg와 동일함을 의미합니다.
● 오른쪽으로: 왼쪽에서 오른쪽으로, 90deg와 동일함을 의미합니다.
● 상단: 하단에서 상단을 의미하며 0deg와 동일합니다.
● 아래쪽으로: 기본값은 위에서 아래로 표시되며 180deg에 해당합니다.
● 오른쪽 아래로: 왼쪽 위에서 오른쪽 아래로를 의미합니다.
● 오른쪽 상단으로: 왼쪽 하단에서 오른쪽 상단으로를 의미합니다.
● 왼쪽 아래로: 오른쪽 위에서 왼쪽 아래로를 의미합니다.
● 왼쪽 위: 오른쪽 아래부터 왼쪽 위를 의미합니다.
color-stop1, color-stop2, ...: 정의된 여러 색상 스케일을 나타냅니다. 각 색상 스케일의 색상을 정의하는 것 외에도 단위 또는 값에 값을 추가하여 색상의 시작 및 끝 위치를 정의할 수도 있습니다. 백분율.
[예제] 선형 그라디언트() 함수를 사용하여 선형 그라디언트를 정의합니다.
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{배경:linear-gradient(torightbottom,red,blue70px);}. two{배경:선형-그라디언트(190deg,#000,#FFF);}.세{배경:선형-그라디언트(빨간색,녹색,파란색);}.4{배경:선형-그라디언트(toright,빨간색,주황색, 노란색, 녹색, 파란색, 남색, 보라색);}</style></head><body><divclass=one></div><divclass=two></div><divclass=3></div> <divclass=four></div></body></html>실행 결과:
2. 방사형 그래디언트 Radial-Gradient()는 중심점에서 방사됩니다.
방사형 그래디언트 유형과 선형 그래디언트 유형의 차이점은 방사형 그래디언트가 중심에서 바깥쪽으로 확장되는 그래디언트라는 점입니다. 중심점의 위치를 지정하고 그래디언트의 모양을 설정할 수 있습니다. 방사형 그래디언트를 정의하는 기본 구문은 다음과 같습니다.
방사형 그라데이션(모양 크기 위치, 색상 중지1, 색상 중지2,...);
매개변수 설명은 다음과 같습니다:
(1) at: 매개변수 위치 앞에 배치되어야 하는 키워드입니다.
(2) 위치: 그라디언트 시작점의 좌표를 지정합니다. 값과 단위, 백분율 또는 키워드(왼쪽, 아래쪽 등)를 사용하여 그라디언트 시작점의 좌표를 지정할 수 있습니다. ) 2개의 매개변수가 제공되면 첫 번째 매개변수는 가로좌표를 나타내고, 두 번째 매개변수는 세로좌표를 나타내는 데 사용됩니다. 매개변수가 1개만 제공되면 두 번째 매개변수는 기본적으로 50%로 설정됩니다. 센터;
(3) 모양 : 그라디언트의 모양을 지정합니다. 선택값은 원형(circle), 타원(ellipse)입니다.
(4) 크기: 그라디언트 모양의 크기를 지정합니다. 특정 숫자 값을 사용하여 원과 타원의 반경을 지정하는 것 외에도 아래에 표시된 키워드를 사용하여 그라디언트 모양의 크기를 지정할 수도 있습니다.
●closest-side: 원의 중심에서 원의 중심에 가장 가까운 쪽까지 방사형 그라데이션의 반경 길이를 지정합니다.
●가장 가까운 모서리: 원의 중심에서 원의 중심에 가장 가까운 모서리까지 방사형 그라데이션의 반경 길이를 지정합니다.
●farthest-side: 기본값, 원의 중심에서 원의 중심에서 가장 먼 쪽까지 방사형 그라데이션의 반경 길이를 지정합니다.
●farthest-corner: 원의 중심에서 원의 중심에서 가장 먼 모서리까지 방사형 그라데이션의 반경 길이를 지정합니다.
(5) color-stop1, color-stop2,...: 정의된 여러 색상 스케일을 나타냅니다. 각 색상 스케일에서 색상을 정의하는 것 외에도 색상의 시작 및 끝 위치를 숫자 값 형식으로 정의할 수도 있습니다. 플러스 단위 또는 백분율.
[예제] Radial-gradient() 함수를 사용하여 방사형 그래디언트를 정의합니다.
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{Background:radial-gradient(circleat50%,red, 노란색, 라임);}.two{배경:방사형-그라디언트(ellipse100px30pxat30%,red,yellow,lime);}.3{배경:방사형-그라디언트(circle100pxat50%,red10%,yellow50%,lime100px);}.4 {배경:방사형-그라디언트(circleclosest-cornerat50px30px,red,yellow,lime);}</style></head><body><divclass=one></div><divclass=two></div><divclass =세></div><divclass=four></div></body></html>실행 결과:
3. 원뿔형 그라디언트 conic-gradient(); 중심점을 중심으로 회전합니다.
원뿔형 그래디언트는 방사형 그래디언트와 유사합니다. 둘 다 색상 스케일의 소스 포인트로 중심점이 있습니다. 차이점은 원뿔형 그래디언트가 중심점에서 방사되는 대신 중심점을 중심으로 회전한다는 것입니다. 원뿔형 그래디언트를 정의하는 방법은 다음과 같습니다.
원뿔형 그라데이션(각도 위치, 시작 색상,...,마지막 색상);
구문은 다음과 같이 설명됩니다.
(1) from: 매개변수 각도 앞에 배치되어야 하는 키워드입니다.
(2) 각도: 원뿔 그라디언트의 시작 각도를 정의합니다. 비어 있을 수 있으며 기본값은 0deg입니다.
(3) at: 매개변수 위치 앞에 배치되어야 하는 키워드입니다.
(4) 위치: 원뿔 그라디언트의 원뿔 중심 좌표를 정의합니다. 값과 단위, 백분율 또는 키워드(예: 왼쪽, 아래쪽 등)를 사용하여 원뿔 중심 좌표를 지정할 수 있습니다. 가 제공되면 첫 번째 매개변수는 가로좌표를 나타내는 데 사용되며, 두 번째 매개변수는 세로좌표를 나타내는 데 사용됩니다. 매개변수가 하나만 제공되면 두 번째 매개변수는 기본적으로 50%로 설정됩니다.
(5) start-color, ..., last-color: 정의된 여러 색상 스케일을 나타냅니다. 각 색상 스케일에서 색상을 정의하는 것 외에도 색상의 시작 위치를 백분율이나 각도로 정의할 수도 있습니다.
[예제] conic-gradient()를 사용하여 원뿔 기울기를 정의합니다.
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{배경:conic-gradient(at50%,red, orange,yellow,green,blue,indigo,violet,red);}.two{배경:원추형 그라데이션(red0deg30deg,orange30deg50deg,yellow50deg200deg,green200deg300deg,blue300deg360deg);}.two{배경:원뿔형 그라데이션(from90deg,red0% 55%,노란색55%90%,라임90%100%);}.four{/*회전. 원은 총 1회전 90deg=100grad=0.25turn≒1.570796326794897rad*/ground:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000.75turn);}< /style> </head><body><divclass=one></div><divclass=two></div><divclass=two></div><divclass=four></div></body> </html >실행 결과:
4. 그라데이션 반복 Repeating-linear-gradient()
CSS에서는 반복-선형-그라디언트(), 반복-방사형-그라디언트() 및 반복-원뿔-그라디언트()와 같은 함수를 사용하여 각각 선형 그라디언트, 방사형 그라디언트 및 원뿔형 그라디언트의 반복 그라디언트를 만들 수도 있습니다. 소위 그라디언트 반복이란 전체 요소를 포함하기 위해 그라디언트 프로세스를 여러 번 반복하는 것을 의미합니다.
Tip: Repeating-linear-gradient(), Repeating-Radial-Gradient(), Repeating-Conic-Gradient() 함수의 구문은 Linear-Gradient(), Radial-Gradient() 함수의 구문과 동일합니다. , conic-gradient() 함수는 각각 동일합니다.
[예시] 반복 선형 그라데이션(), 반복 방사형 그라데이션() 및 반복 원추형 그라데이션()의 세 가지 함수를 사용하여 반복 그라데이션을 정의합니다.
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{배경:repeating-linear-gradient(190deg,# 0000px10px,#FFF10px20px);}.two{배경:반복 방사형 그라데이션(circle100pxat50%,red0%10%,yellow10%30%,lime30%40%);}.two{배경:반복 원추형 그라데이션(# 69f036deg,#fd44ff36deg72deg);}.4{배경:원추형 그라데이션(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000.75turn)topleft/25%25%repeat;}</style ></head><body><divclass=one></div><divclass=two></div><divclass=two></div><divclass=four></div></body></ HTML>실행 결과:
