Compatible with the gradient format of the gradient color background of multiple browsers, gradient

Compatible with the gradient format of the gradient color background of multiple browsers, gradient

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 shows the gradient support of the five browsers:

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

1 <style type = "text/css" media = "screen"> 2 # gradient {3 width: 200px; 4 height: 200px; 5/* If the browser does not support gradient, use an image as the background */6 background: url(gradient.jpg); 7/* Webkit: Safari 4-5, Chrome 1-9 */8 background:-webkit-gradient (linear, 0% 0%, 0% 100%, from (# ff6600), to (#339900); 9/* Webkit: Safari 5.1 +, Chrome 10 + */10 background: -webkit-linear-gradient (top, # ff6600, #339900); 11/* Firefox 3.6 + */12 background:-moz-linear-gradient (top, # ff6600, #339900); 13/* Opera 11.10 + */14 background:-o-linear-gradient (top, # ff6600, #339900 ); 15/* IE 10 */16 background:-ms-linear-gradient (top, # ff6600, #339900); 17/* IE <10 */18/* Note: this line must be written at the end */19 FILTER: progid: DXImageTransform. microsoft. gradient (startColorStr = # ff6600, endColorStr = #339900);} 20 </style>

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