CSS3의 '그라데이션' 호환성 솔루션에 대한 자세한 설명

이번에는 비교적 간단한 문제인 다양한 브라우저에서 일반적인 그라디언트의 호환성 문제에 대해 간략하게 이야기하겠습니다.
우리에게 익숙한 브라우저에는 Chrome, Firefox, Opera, Safari 및 IE 시리즈가 포함됩니다. 가장 기본적인 배경: #ccccccattribute은 페이지가 #cccccc 색상으로 렌더링된다는 것을 의미합니다. 물론 이는 모든 브라우저에서 만족스럽습니다. 그러나 색상에 대한 요구 사항이 증가함에 따라 선형 그라데이션 그라데이션이 도입되었으며 다양한 브라우저는 이해를 돕기 위해 다양한 접두사를 추가해야 합니다. 위의 예에서 우리는 firefox:-moz-, chrome/safari/opera:-webkit-, ie:-ms-를 알 수 있습니다. 물론 ie의 많은 버전에서는 이를 허용하지 않으므로 필터로 처리할 수 있습니다. .
IE의 필터 효과에 집중해 보겠습니다.

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);

스타일=0: 통합 모양; 스타일=1: 선형; 스타일=3: 직사각형; startx/starty/finishx/finishy: 끝점의 좌표
그래디언트=1: 가로 그래디언트=0: 세로 그래디언트.

-webkit-linear-gradient(top,#ffffff,#000000);

선형: 그라데이션 유형
위쪽: 시작점
#ffffff: 시작 색상
#000000:끝 색상
지원 브라우저: Webkit(-webkit -) ,Gecko(-moz-),presto(-o-),Trident(-ms-)
방향:
위에서 'top'은 시작점이며 'to
bottom' : 0deg는 방향이 왼쪽에서 오른쪽임을 의미하고, 90deg는 아래에서 위쪽을 의미합니다. 양수 값과 반대 방향인 음수 값으로 표시될 수 있습니다.
탑 클래스: 시작 방향만 알려주세요. 양방향의 경우
left top과 같은 두 방향 속성을 추가하면 됩니다.

ps: 이러한 변경 사항을 충족하지 않는 다른 브라우저는 아직 상대적으로 적습니다. 이러한 상황에서는 가장 기본적인 배경인 #red 등을 사용하여 적절한 전환 색상을 정의할 수 있습니다.

위 내용은 CSS3의 '그라데이션' 호환성 솔루션에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!