CSS3 배경 그라데이션 정보

CSS3 그래디언트와 관련하여 현재 주요 브라우저는 제대로 지원하지 않으므로 사용할 때 주요 브라우저 접두사를 추가해야 합니다.

-moz-: Mozilla 코어를 사용하는 브라우저(Firefox 브라우저)

-webkit-: Webkit 코어를 사용하는 브라우저(Chrome, Safari 브라우저)

-o-: Opera core를 사용하는 브라우저(Opera 브라우저)

여기서는 IE에 대해 너무 많이 소개하지 않을 것이며, 이 글에서는 IE를 배경색의 그라데이션으로 고려하지 않습니다

1. 선형 그라데이션

1.구문: -moz-linear-gradient(/,,……)

매개변수: 첫 번째 매개변수는 선형 그래디언트의 방향입니다

위: 위에서 아래로

왼쪽: 왼쪽에서 오른쪽으로

오른쪽: 오른쪽에서 왼쪽으로

하단: 아래에서 위로

예를 들어 왼쪽 위: 왼쪽 위, 오른쪽 위: 오른쪽 위 등 쌍으로 결합할 수도 있습니다. 여기서는 자세히 소개하지 않겠습니다.

각도는 각도를 나타냅니다(저는 항상 각도가 포함된 평면 직사각형 좌표계가 충분히 직관적이라고 생각했습니다).

두 번째 매개변수와 세 번째 매개변수는 각각 시작점과 끝점의 색상입니다. 또한 그 사이에 더 많은 매개변수를 삽입하여 여러 색상의 그라데이션을 표현할 수도 있고, 16진수 숫자 표현을 지원하는 경우도 있습니다. RGB(a) 값

예: background:-moz-linear-gradient(top,#000,#fff)

참고: #000에서 #fff까지의 그라데이션을 나타냅니다.

배경:-moz-linear-gradient(45deg,#000 50%,#555 50%,#555);

참고: 0~50%는 #000, 50%~100%는 #555입니다

2.

구문: -webkit-linear-gradient(/,,...) [새 문법 작성 규칙]

　 -webkit-gradient(,/,/,, ;...) [옛날 문법 작성 규칙]

새로운 문법 작성 규칙은 다른 문법과 동일하므로 여기서는 오래 소개하지 않겠습니다. 기존 문법 규칙은 다음과 같습니다.

매개변수: 첫 번째 매개변수는 선형(선형) 또는 방사형(방사형)일 수 있는 그라데이션 유형을 나타냅니다. 두 번째 매개변수와 세 번째 매개변수는 그라데이션의 시작점과 끝점을 나타내며 좌표 또는 키 값일 수 있습니다.

네 번째와 다섯 번째 매개변수는 각각 시작점과 끝점의 색상을 나타냅니다. 이 매개변수 사이에 더 많은 매개변수를 삽입하여 여러 색상의 그라데이션을 표현할 수 있으며, 색상은 16진수 숫자 표현을 지원하며 rgb( 가) 가치.

예: background:-webkit-gradient(linear,left top,left Bottom,from(#fff),to(#000));

참고: 위에서 아래로, #fff에서 #000까지의 그라데이션을 나타냅니다

배경:-webkit-gradient(선형,0 0,100% 100%,color-stop(.5,rgb(255,255,255)),color-stop(.5,rgba(0,0,0,.2)) );

참고: 왼쪽 위에서 오른쪽 아래로 투명도가 0.2인 0~50%는 흰색, 50%~100%는 검은색입니다.

3.

구문: -o-linear-gradient(/,,……)

예: background:-moz-linear-gradient(top,#000,#fff)

참고: #000에서 #fff까지의 그라데이션을 나타냅니다.

둘. 방사형 그래디언트

구문: -moz-radial-gradient(/,/,,…… );

　-webkit-radial-gradient(/,/,,……);

Oprea 브라우저의 방사형 그래디언트 지원은 아직 그다지 좋지 않으므로 여기서는 소개하지 않겠습니다. 선형 그라디언트에 표시되는 실제 위치, 방향 및 색상 외에도 방사형 그라디언트를 사용하면 그라디언트의 모양(원, 타원 및 크기: 가장 가까운 쪽, 가장 가까운 쪽), 가장 먼 쪽, 가장 먼 모서리)을 지정할 수 있습니다. , 담다, 덮다. 이러한 설정 크기에는 약간의 차이가 있어 다소 혼란스럽습니다.

예:

배경:

방사형-그라디언트(#fff, #000);

　배경: -webkit-방사형-그라디언트(#fff, #000);

참고: 흰색을 의미합니다. 검정색으로 원형 그라데이션

배경: -moz-radial-gradient(80% 20%, 가장 가까운 모서리, #fff, #000);

배경: -webkit-radial-gradient(80% 20%, 가장 가까운 모서리, #fff, #000);

참고: 이는 80% 20% 위치에서 흰색 원에서 검정색으로 그라데이션이 있음을 의미합니다.

2.css 반복 그래디언트

구문: -moz-repeating-linear-gradient(/,,…);

-webkit-repeating-linear-gradient(/,,...);

　 -o-repeating-linear-gradient(/,,……);

　-moz-radial-gradient(/,/,,……);

　-webkit-radial-gradient(/,/,,……);

예: 배경: -moz-repeating-radial-gradient(#fff, #000 5px, #000 5px, #000 10px);

　배경: -webkit-repeating-radial-gradient(#fff, #000 5px, #000 5px, #fff 10px);

참고: 검은색과 흰색의 원으로 이루어진 원을 나타냅니다(너무 어리둥절해하지 마세요)

이 글은 다모 블로그 http://www.w3cplus.com/content/css3-gradient에서 발췌했습니다