크로스 브라우저 선형 그래디언트를 어떻게 만들 수 있나요?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-21 10:56:11

원래의

359명이 탐색했습니다.

How Can I Create a Cross-Browser Linear Gradient?

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

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

Opera

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

로그인 후 복사

Internet Explorer

IE < 10

/*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 중국어 웹사이트의 기타 관련 기사를 참조하세요!