CSS3에서 그래디언트 속성을 사용하여 배경 그래디언트 효과를 만드는 방법

이 글에서는 CSS3 배경 그래디언트의 효과에 대해 설명하겠습니다. 이는 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

배경 그래디언트는 좋은 특수 효과이므로 이 효과를 얻기 위해 CSS3를 사용하는 방법은 다음과 같습니다. ? 오늘은 CSS3 그라디언트를 공유하겠습니다. CSS3 그라디언트는 이미지 모듈에 추가된 새로운 유형의 이미지입니다. CSS3 그라데이션을 사용하면 두 개 이상의 지정된 색상 사이를 부드럽게 전환할 수 있습니다.

브라우저는 두 가지 유형의 그라데이션을 지원합니다.

linear-gradient() 함수로 정의된

radial, Radial-gradient() 함수로 정의

사용 중 브라우저 호환성 문제에 주의하세요.

Safari, Chrome: -webkit-linear-gradient

Firefox: -moz-linear-gradient

IE: -ms-linear-gradient

Opera: -o-linear-gradient

이 문서 이 기사에서는 Chrome 브라우저를 예로 들어

선형 그래디언트

선형 그래디언트를 만들려면 시작점과 방향을 각도로 설정하고 최소한 색상 정지점을 정의해야 합니다. 두 개의 정지 색상.

위에서 아래로 선형 그라데이션

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

왼쪽에서 오른쪽으로 그라데이션 프로세스

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

선형 그래디언트(일시 중지도 포함)

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

방사형 그라데이션

방사형 그라데이션은 중심으로 정의되며 그라데이션의 중심과 모양(원 또는 타원형)을 정의할 수도 있습니다. 크기에서 기본적으로 그라디언트의 중심은 중앙(중심점을 나타냄)이고 그라디언트의 모양은 타원(타원을 나타냄)이며 그라디언트의 크기는 가장 먼 모서리(가장 먼 모서리를 나타냄)입니다. ㅋㅋㅋ

요약: 위 내용이 전부입니다 이 기사의 내용이 모든 사람이 그라디언트를 배우는 데 도움이 되기를 바랍니다.

위 내용은 CSS3에서 그래디언트 속성을 사용하여 배경 그래디언트 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!