CSS선형 그라데이션 및 방사형 그라데이션

이전에 CSS3 속성을 많이 사용해 봤지만 기억하기 복잡한 속성이 많아서 금방 잊어버리고 기억하기 쉽도록 블로그에 글을 쓰고 싶습니다.
먼저 선 그라데이션에 대해 설명하겠습니다.
배경 이미지: 선형 그라데이션(방향, 색상 단계1, 색상 단계2, ....)

• 방향: 각도를 사용하여 값이 각도 또는 왼쪽, 오른쪽, 위쪽, 아래쪽 중 하나일 수 있는 그라데이션 방향을 나타냅니다. 아래쪽(180deg)이 기본값입니다. 
• color-step: 그라데이션의 시작 색상으로, 두 부분으로 구성됩니다. color: 유효한 CSS 색상 값; 길이 또는 백분율: 시작 위치, 음수 값은 허용되지 않음

예제(높이:100px 가정)
배경:선형 그라데이션(아래로, 빨간색 0%, 노란색 50%, 녹색 100%); 배경과 동일:선형 그라데이션(180deg, 빨간색 0px, 노란색 50px, 녹색 100px);


반복-선형-그라디언트(): 배경: 반복-선형-그라디언트(빨간색 0, 빨간색 10%, 노란색 10%, 노란색 20%);


이러한 매개변수는 빨간색에서 빨간색까지 0% - 10%, 노란색에서 노란색까지 10% - 20%를 나타내며 이 효과를 반복하여 전체 요소 크기를 포괄합니다.

방사형 그라데이션()
이 함수 매개변수는 모양, 크기, 원 중심 위치, 색상, 색상 위치의 다섯 가지 부분으로 구성됩니다.

• 모양: 타원(기본값) 또는 원;
• 크기: 방사형 그라데이션 반경이 증가하는 방향으로 부르는 것을 선호하며 가능한 값은 가장 먼 모서리(기본값), 가장 가까운 모서리, 가장 먼 쪽, 가장 가까운 쪽입니다.
• 위치: 방사형 그래디언트의 중심 위치(50%, 50%)가 기본값입니다.
• 색상 및 색상 위치: 선형 그라데이션과 동일

이 효과는 중심 위치가 (0,0)에 위치하고 그라데이션 반경이 요소의 너비와 동일하다는 것입니다.

반복-방사형-그라디언트()는 반복-선형-그라디언트()와 동일합니다.

마지막으로 선형 그라데이션과 방사형 그라데이션의 호환성이 있습니다(자세한 내용은 CanIuse 웹사이트에서 확인하세요)

위 내용은 CSS선형 그라데이션 및 방사형 그라데이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!