CSS3 선형 그래디언트 구문에 대한 자세한 설명(코드 예)

이 글에서는 CSS3 선형 그래디언트 구문(코드 예시)에 대해 자세히 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

선형 그래디언트의 전체 구문:

.demo  {   
    background: linear-gradient(to left, black, white);
}

효과:

호환성 작성:

지원되는 모든 브라우저에서 선형 그래디언트가 작동하도록 하려면 다음을 수행하세요.

효과는 위 사진과 같습니다.

그라디언트 각도 또는 시작점

선형 그래디언트는 직선 그래디언트 선을 지정한 다음 해당 선을 따라 여러 색상을 배치하여 생성되는 그래디언트입니다. 이를 설정하여 그라디언트의 방향을 제공할 수 있습니다.

그라디언트 선의 방향은 두 가지 방법으로 설정할 수 있습니다.

1. 그라디언트에 사용되는 각도를 선언합니다.

2 키워드를 사용하여 그라디언트가 시작되는 위치를 알려줍니다.

위의 예에서는

오른쪽에서 시작하여 왼쪽으로 이동이라고 했습니다. 이는 각도 "-90deg"에 해당합니다. 따라서 동일한 결과가 생성됩니다.

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff');
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')";
	
	/* Safari 4 +，Chrome 2+  */
	background: -webkit-gradient(linear, left, right, color-stop(0%, #000000), color-stop(100%, #ffffff));
	
	/* Safari 5.1 - 6.0 */
	background: -webkit-linear-gradient(right, black, white);
	
	/* Firefox 3.6 - 15 */
	background: -moz-linear-gradient(right, black, white);
	
	/* Opera 11.1 - 12.0 */
	background: -o-linear-gradient(right, black, white);
	
	/* 标准的语法 */
	background: linear-gradient(to left, black, white);
	
}

Rendering:

"-90deg"에 해당하는 "270deg" 각도를 사용하는 경우에도 동일한 결과가 표시됩니다.

따라서 위치 키워드(상단, 오른쪽, 왼쪽, 하단) 중 하나를 사용하거나 숫자로 특정 각도를 지정하면 시작할 위치를 파악할 수 있습니다.

끝 색상 및 위치

끝 위치

간단한 선형 그래디언트를 사용하면 끝 색상 두 개만 필요하고 위치를 지정할 필요가 없습니다(위 예와 같이). 하지만 아래 예에서는

background: linear-gradient(-90deg, black, white);

여기에 백분율 값에 각 색상의 위치가 포함되어 있음을 알 수 있습니다.

렌더링:

이는 각 색상의 그라데이션이 시작하고 끝나는 위치를 브라우저에 알려줍니다(색상 길이 지정). 브라우저는 자연스럽게 실제 그래디언트를 파악합니다. "점진적 변경"이 완전히 "중지"되어야 하는 위치를 알려 주기만 ​​하면 됩니다. 위의 예에서 "그라디언트"는 요소의 왼쪽에서 멈추므로 해당 요소에 완전한 흰색이 많이 표시되지 않습니다.

End Color

색상 블록을 추가하는 것은 더 이상 복잡하지 않습니다. 쉼표로 구분된 값을 원하는 만큼 추가하면 됩니다. 이것은 무지개의 CSS입니다.

background: linear-gradient(-90deg, black 50%, white 100%);

렌더링:

선형 그래디언트에 대한 일부 참고 사항:

1. CSS3 그래디언트는 속성이 아니며 2. 브라우저에서 렌더링된 이미지입니다.

2, CSS의 URL(image.jpg)을 통해 어느 위치에서나 그라디언트를 사용할 수 있습니다.

3. 그라디언트를 생성하는 구문은 실제로 다양한 값을 매개변수로 사용하는 함수입니다. 경우에 따라 매우 유용할 수 있는 반복 선형 그라데이션

5. 색상 끝 위치의 값은 백분율 또는 픽셀로 표시될 수 있습니다.

6. -20%) 및 100%를 초과하는 백분율은 완벽하게 유효합니다.

요약

: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 CSS3 선형 그래디언트 구문에 대한 자세한 설명(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!