CSS3 선형 그래디언트 구문에 대한 자세한 설명(코드 예)-CSS 튜토리얼-php.cn

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

青灯夜游

풀어 주다： 2018-11-05 14:54:27

원래의

4833명이 탐색했습니다.

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

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

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

로그인 후 복사

효과:

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

호환성 작성:

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

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

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

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

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

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

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

위의 예에서는

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

.demo {	
	/* IE6 & IE7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;);
	
	/* IE8+ */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#ffffff&#39;)";
	
	/* 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:

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

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

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

끝 색상 및 위치

끝 위치

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

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

로그인 후 복사

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

렌더링:

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

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

End Color

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

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

로그인 후 복사

렌더링:

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

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

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

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

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

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

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

요약

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

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