CSS for compatibility with the gradient background (gradient) effect

Using CSS 3 to achieve a gradient can easily change its color, and can reduce the production of pictures, but its compatibility is not good, the following code is implemented using CSS gradient compatible code:

. gradient{    width:300px;    height:150px;    Filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);    -ms-filter:alpha (opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) Progid:D XImageTransform.Microsoft.gradient (startcolorstr=red,endcolorstr=blue,gradienttype=0);/*ie8 gradient background under browser *    / background:red; /* Some browsers that do not support background gradients *      /background:-moz-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5));  /* Gradient background under Firefox browser */    background:-webkit-gradient (linear, 0 0, 0 bottom, from (#ff0000), to (RGBA (0, 0, 255, 0.5)); 
   /* Chrome/safari Browser Gradient Background Implementation    */background:-o-linear-gradient (top, Red, RGBA (0, 0, 255, 0.5));/* Gradient background under Opera browser * /}<div class= "Gradient" ></div>

The effect of the implementation is as follows:

Specific instructions for use can be viewed Zhang Xin Xu Blog address: http://www.zhangxinxu.com/wordpress/?p=743

CSS for compatibility with the gradient background (gradient) effect