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.