CSS의 선형 그라데이션 속성에 대한 심층적인 이해

인터넷의 발전으로 사람들은 웹 페이지의 기능에 대한 요구 사항이 높을 뿐만 아니라 페이지의 모양에 대한 요구 사항도 점점 더 높아지고 있습니다. 예를 들어 페이지 색상은 더 이상 단일 색상을 사용하지 않고 사용됩니다. 다양한 색상 혼합으로 페이지를 더욱 아름답게 만들어 더 많은 사용자를 유치합니다. 이 문서에서는 선형 그라데이션() 속성, 선형 그라데이션() 각도, 선형 그라데이션() 방향 등을 포함하여 CSS 선형 그라데이션 선형 그라데이션() 함수를 사용하는 방법을 공유합니다. 도움이 필요한 친구들이 참고할 수 있으니 도움이 되길 바랍니다.

linear-gradient() 구문:

= 선형-그라디언트([ [ | to ] ,]? ]+)
= [왼쪽 | 오른쪽] || [상단 | 하단]
[ ; | ]?

linear-gradient() 값:

다음 값은 각도 또는 키워드를 사용하여 설정할 수 있는 ​​그라데이션의 방향을 나타내는 데 사용됩니다. : 각도 사용 이 값은 그라데이션의 방향(또는 각도)을 지정합니다.
왼쪽: 오른쪽에서 왼쪽으로 그라데이션을 설정합니다. 해당 항목: 270deg
to right: 그라데이션을 왼쪽에서 오른쪽으로 설정합니다. 해당 항목: 90deg
to top: 그라데이션을 아래에서 위로 설정합니다. 해당 항목: 0deg
to 하단: 위에서 아래로 그라데이션을 설정합니다. 에 해당: 180deg. 이는 기본값이며 공백으로 두는 것과 같습니다.

: 그라데이션의 시작 및 끝 색상을 지정하는 데 사용됩니다.

: 색상을 지정합니다.
: 길이 값을 사용하여 시작 및 끝 색상 위치를 지정합니다. 음수 값은 허용되지 않습니다
: 백분율을 사용하여 시작 및 끝 색상 위치를 지정합니다.

참고: 선형 그래디언트를 만들려면 그래디언트 효과의 시작점과 방향(각도로 지정)을 설정해야 합니다. 끝 색상도 정의해야 합니다. 중지 색상은 Gecko가 만들기를 원하는 부드러운 전환이며, 더 복잡한 그라데이션 효과를 만들기 위해 더 많은 색상을 지정할 수 있지만 적어도 두 개를 지정해야 합니다.

linear-gradient()의 브라우저 호환성

linear-gradient()의 사용 예

HTML 부분:

<div id="box"></div>

CSS 부분:

#box{
    height: 200px;
    width: 300px;
       background: -webkit-linear-gradient(right, red , yellow); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient( right, red, yellow); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, red, yellow); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right, red , yellow); /* 标准的语法（必须放在最后） */
   }

렌더링:

표시된 바와 같이 그림의 예는 빨간색에서 노란색으로, 왼쪽에서 오른쪽으로 선형 그라데이션입니다. 글을 쓸 때 브라우저 호환성 문제와 문법 규칙에 주의하세요. 이번 글에서는 주로 CSS의 선형 그래디언트를 소개합니다. 그래디언트는 선형 그래디언트와 방사형 그래디언트로 나누어집니다. 다음 글에서는 방사형 그래디언트에 대해 공유하겠습니다. 좋아하는 친구들은 나를 팔로우할 수 있어요!

위 내용은 CSS의 선형 그라데이션 속성에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!