CSS3에 두 종류의 그라디언트 도입 예

이 글은 CSS3의 두 가지 유형의 그라디언트에 대한 예제를 제공합니다. 이는 특정 참조 값이 있으므로 도움이 될 수 있습니다.

css3
ps: CSS는 점점 더 언어와 비슷해지고 있습니다. CSS에는 이미 변수가 있습니다. 방금 문서에서 봤습니다. 실험적인 기능입니다.

Gradient

그라디언트는 두 가지 유형의 그라디언트로 구분됩니다. 하나는 선형 그라디언트이고 다른 하나는 방사형 그라디언트입니다.

선형 그라디언트

선형 그라디언트에는 위쪽, 아래쪽, 왼쪽 및 오른쪽의 두 가지 그라디언트 모드가 있습니다.

linear-gradient() function

이것은 CSS의 기능입니다. 선형 그래디언트는 축, 즉 그래디언트 선으로 구성됩니다. 각 점에는 두 가지 이상의 색상이 있습니다. 축의 각 점은 독립적인 색상을 갖습니다. 부드러운 그라데이션을 만들기 위해 이 기능은 일련의 음영선도 만듭니다. 각 음영선의 색상은 수직으로 교차하는 그라데이션 선의 색상 점에 따라 달라집니다.

// 渐变轴45度，重蓝色到红色linear-gradient(45deg, blue, red);

// 从右下到左上，蓝色渐变到红色linear-gradient(to left top, blue, red);

// 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 linear-gradient(0deg, blue, green 40%, red)

ps 투명도는 rgba의 마지막 매개변수입니다

방사형 그라데이션

방사형 그라데이션은 중심점, 가장자리 모양, 윤곽선 및 위치와 색상 값 끝점 구성으로 구성됩니다. .
방사형 그래디언트는 타원으로 연속적으로 구성됩니다

첫 번째 매개변수

첫 번째 매개변수는 일반적으로 생략 가능합니다.

가장 먼 구석

원은 백분율로 표시

따로 쓰기

퍼센트 기호

추천 기사:

CSS3 애니메이션 속성: 변환 속성

소개 CSS3 애니메이션 속성: 애니메이션 속성 소개

위 내용은 CSS3에 두 종류의 그라디언트 도입 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!