Detailed explanation of how to write gradient compatible with multiple browsers

To be compatible with multiple browsers, you need to write corresponding CSS for each browser. Browsers that are too low-level can only use images as backgrounds. The following is the current support for gradient by the five major browsers. There are often times when we need to use gradient backgrounds. Using long pictures is a bit too immodest, so I wrote a small example. To be compatible with multiple browsers, we need to write corresponding CSS for each browser, which is too low version of the browser. Only images can be used as backgrounds.
The following is the current support for gradient in the five major browsers

The code is as follows:

<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>

The code is as follows:

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

When was there no IE6, when was the world It's peaceful. Damn IE.

【Related Recommendations】

1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download

2. Free css online video tutorial

3. php.cn Dugu Jiujian (2)-css video tutorial

4. In-depth understanding of CSS3 gradients (Gradients)

The above is the detailed content of Detailed explanation of how to write gradient compatible with multiple browsers. For more information, please follow other related articles on the PHP Chinese website!