CSS3의 크로스 브라우저 선형 그래디언트>

CSS3에서 선형 그래디언트를 생성하는 것은 쉽지만 크로스 브라우저 호환성은 매우 어려울 수 있습니다. 도전. Webkit 브라우저(Chrome 및 Safari) 및 Firefox는 Opera 및 Internet Explorer와 다른 구문을 사용합니다.

Webkit 및 Firefox 대안

제공된 Webkit 및 Firefox 구문은 오른쪽 위에서 왼쪽 아래로 대각선 선형 그라데이션입니다. Opera와 Internet Explorer를 사용하여 이와 동일한 그라데이션을 얻는 방법은 다음과 같습니다.

<br> background-image: -ms-linear-gradient(right, #0c93C0, #FFF); <br>배경 이미지: -o-linear-gradient(right, #0c93C0, #FFF);<br>

브라우저 간 수평 그라데이션

가로 그라데이션을 만들려면 '위쪽' 방향을 '왼쪽' 방향으로 바꾸세요. 또는 "right".

Internet Explorer

Internet Explorer 버전 10 미만의 경우 필터 속성을 사용해야 합니다.

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

-ms-Filter 구문

-ms-filter 구문은 다음과 같습니다.

-ms-필터: progid:DXImageTransform.Microsoft.Gradient(

 startColorStr='#0c93c0', /*Start color*/
 endColorStr='#FFFFFF',   /*End color*/
 GradientType=0           /*0=Vertical, 1=Horizontal gradient*/

로그인 후 복사

);

ARGB 색상 형식을 사용할 수도 있습니다. 여기서 FF는 불투명을 나타내고 00은 투명을 나타냅니다.

위 내용은 CSS3에서 브라우저 간 호환 가능한 선형 그라디언트를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!