크로스 브라우저 선형 그래디언트를 어떻게 만들 수 있나요?

브라우저 간 선형 그래디언트 사용

브라우저 간 선형 그래디언트를 달성하려면 브라우저 간의 차이점을 고려하는 것이 중요합니다. Opera 및 Internet Explorer(IE)에 대한 대안은 다음과 같습니다.

Opera

background-image:     -o-linear-gradient(right, #0c93C0, #FFF);

Internet Explorer

IE

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);

/*IE8+*/
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

IE10

background-image:     -ms-linear-gradient(right, #0c93C0, #FFF);

가로 그라데이션으로 수정

가로 그라데이션을 만들려면 위쪽이나 아래쪽이 아닌 왼쪽이나 오른쪽 방향을 사용하세요.

실험적인 CSS 접두사

실험적인 CSS 속성에 유의하세요. 접두어를 사용하여 대상 브라우저를 나타냅니다.

• -webkit- Webkit 브라우저(Chrome, Safari)의 경우
• -moz- Firefox의 경우
• -o - Opera용
• -ms- Internet Explorer

Microsoft용 그라데이션 필터 구문

IE의 경우 -ms-filter 구문은 다음과 같습니다.

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
    startColorStr='#0c93c0', /*Start color*/
    endColorStr='#FFFFFF',   /*End color*/
    GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

GradientType은 선택 사항이며 생략 가능합니다.

위 내용은 크로스 브라우저 선형 그래디언트를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!