여러 브라우저와 호환되는 그라디언트 작성 방법에 대한 자세한 설명

여러 브라우저와 호환되려면 각 브라우저에 해당하는 CSS를 작성해야 합니다. 버전이 너무 낮은 브라우저에서는 그림만 배경으로 사용할 수 있습니다. 다음은 현재 5대 주요 그라데이션 지원입니다. 브라우저. 그라데이션 배경을 사용해야 할 때가 있는데, 긴 그림을 사용하는 것은 좀 너무 촌스럽기 때문에 작은 예제를 작성했습니다. 여러 브라우저와 호환되도록 하려면 각 브라우저에 해당하는 CSS를 작성해야 하는데, 이는 너무 낮습니다. 브라우저 수준입니다. 이미지만 배경으로 사용할 수 있습니다.
현재 주요 5개 브라우저에서 그래디언트를 지원하는 내용은 다음과 같습니다

코드는 다음과 같습니다.

<style type="text/css" media="screen"> 
#gradient { 
width: 200px; 
height: 200px; 
/* 如果浏览器不支持渐变，使用图像作为背景 */ 
background: url(gradient.jpg); 
/* Webkit: Safari 4-5, Chrome 1-9 */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900)); 
/* Webkit: Safari 5.1+, Chrome 10+ */ 
background: -webkit-linear-gradient(top, #ff6600, #339900); 
/* Firefox 3.6+ */ 
background: -moz-linear-gradient(top, #ff6600, #339900); 
/* Opera 11.10+ */ 
background: -o-linear-gradient(top, #ff6600, #339900); 
/* IE 10 */ 
background: -ms-linear-gradient(top, #ff6600, #339900); 
/* IE < 10 */ 
/* 注意：这一行必须写在最后 */ 
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
</style>

코드는 다음과 같습니다

<p id="gradient"></p>

언제 IE6가 없었나요, 언제 세상이 평화로웠나요. 빌어먹을 IE.

【관련 추천】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. 무료 CSS 온라인 동영상 튜토리얼

3. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼

4. CSS3 그래디언트(Gradients)에 대한 심층적인 이해

위 내용은 여러 브라우저와 호환되는 그라디언트 작성 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!