マルチブラウザ対応のグラデーション効果
1491 ワード
オレンジ色のグラデーションの例を次に示します.
.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;
}