Compatible with gradient color backgrounds of multiple browsers

There are often times when gradient backgrounds are needed. It is a little too small to use a long image, so I wrote a small example myself. To be compatible with multiple browsers, I had to write the corresponding CSS for each browser, browsers of earlier versions can only use images as backgrounds.

The following figure shows gradient support for the five browsers.
CSS code

1. <Style type = "text/CSS" Media = "screen">
3. # Gradient {
5. Width: 200px;
7. Height: 200px;
9. /* If the browser does not support gradient, use the image as the background */
11. Background: url(gradient.jpg );
13. /* WebKit: Safari 4-5, chrome 1-9 */
15. Background:-WebKit-gradient (linear, 0% 0%, 0% 100%, from (# ff6600), to (#339900 ));
17. /* WebKit: safari 5.1 +, chrome 10 + */
19. Background:-WebKit-linear-gradient (top, # ff6600, #339900 );
21. /* Firefox 3.6 + */
23. Background:-moz-linear-gradient (top, # ff6600, #339900 );
25. /* Operators' 11.10 + */
27. Background:-o-linear-gradient (top, # ff6600, #339900 );
29. /* Ie 10 */
31. Background:-MS-linear-gradient (top, # ff6600, #339900 );
33. /* Ie <10 */
35. /* Note: This line must be written at the end */
37. Filter: progid: DXImageTransform. Microsoft. gradient (startcolorstr = # ff6600, endcolorstr = #339900 );}
38. </Style>

HTML code

1. <Div id = "gradient"> </div>

When there is no IE6, when the world is peaceful. Internet Explorer.