マルチブラウザ対応のグラデーション効果


オレンジ色のグラデーションの例を次に示します.
.orange{

    color:white;

    border:1px #e38515 solid;

    background:#fe8d00;

    background:-moz-linear-gradient(top, #feac00, rgba(225, 110, 0, 1)); 

    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#feac00), to(rgba(225, 110, 0, 1)));

    filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#feac00,endcolorstr=#ff6e00,gradientType=0); /*IE6、IE7*/

    -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#feac00,endcolorstr=#ff6e00,gradientType=0);/*IE8*/ 
zoom:1; } .orange:hover{ color:white; border:1px #e38515 solid; background:#fe8d00; background:-moz-linear-gradient(top, #ff6e00, rgba(254, 172, 0, 1)); background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff6e00), to(rgba(254, 172, 0, 1))); filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff6e00,endcolorstr=#feac00,gradientType=0); /*IE6、IE7*/ -ms-filter:alpha(opacity=100 finishopacity=100 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff6e00,endcolorstr=#feac00,gradientType=0);/*IE8*/
zoom:1;
}