CSS3에서 색상 그라데이션 효과를 얻는 방법

css3에서 색상 그라디언트 효과를 얻는 방법: 선형 그라디언트 기능과 방사형 그라디언트 기능을 사용하여 [선형-그라디언트(노란색, 녹색)]와 같은 선형 그라디언트 효과와 방사형 그라디언트 효과를 각각 얻을 수 있습니다.

CSS3 그라디언트에는 CSS3 선형 그라디언트와 CSS3 방사형 그라디언트의 두 가지 유형이 있습니다.

(학습 영상 공유:css 영상 튜토리얼)

1. 선형 그라데이션 색상 그라데이션

기능:

linear-gradient() 함수는 두 가지 이상의 색상의 선형 그라데이션을 나타내는 그림을 만드는 데 사용됩니다.

구문:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

값:

• direction 각도 값을 사용하여 그라데이션의 방향(또는 각도)을 지정합니다.

• color-stop1, color-stop2,... 그라데이션의 시작 및 끝 색상을 지정하는 데 사용됩니다.

예:

      
  
线性渐变 - 从上到下
 
  

2. 방사형 그래디언트

함수

radial-gradient() 함수는 방사형 그래디언트를 사용하여 "이미지"를 생성합니다.

방사형 그라데이션은 중심점으로 정의됩니다.

방사형 그래디언트를 만들려면 두 가지 정지 색상을 설정해야 합니다.

구문:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

값:

1. 모양 원 유형 결정

• 타원(기본값): 타원의 방사형 그라데이션을 지정합니다.

• 원: 원의 방사형 그라데이션을 지정합니다.

2, 크기 그라데이션의 크기를 정의합니다. 가능한 값:

• farthest-corner(기본값): 방사형 그라데이션의 반경 길이를 지정합니다. 원의 중심에서 원의 중심에서 가장 먼 각도

• closest-side: 원의 중심에서 원의 중심에 가장 가까운 쪽까지 방사형 그래디언트의 반경 길이를 지정합니다

• closest-corner: 원의 중심에서 원의 중심에 가장 가까운 쪽까지 방사형 그래디언트의 반경 길이를 지정합니다. 원의 중심에 가장 가까운 각도

• farthest-side: 반경 길이를 지정합니다. 원의 중심에서 원의 중심에서 가장 먼 쪽까지의 방사형 그래디언트

3. 위치는 그래디언트의 위치를 정의합니다. 가능한 값:

• center(기본값): 중앙에 있는 방사형 그라데이션 원 중심의 세로 좌표 값을 설정합니다.

• top: 상단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.

• bottom: 하단을 방사형 그래디언트 원 중심의 세로 좌표 값으로 설정합니다.

4. start-color, ..., last-color는 그라디언트의 시작 색상과 끝 색상을 지정하는 데 사용됩니다.

예:

      
  
径向渐变
 
  

관련 권장 사항:CSS 튜토리얼

위 내용은 CSS3에서 색상 그라데이션 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!