CSS 兼容IE8的线性渐变和旋转

因IE8不兼容CSS3旋转和渐变的属性,改用filter实现

渐变

以下效果为横向渐变,从左到右,加了透明度

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 finishopacity=50 style=1 startx=0,starty=0,finishx=100,finishy=0) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#f8f8f8,endcolorstr=#f8f8f8,gradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0 finishopacity=50 style=1 startx=0,starty=0,finishx=100,finishy=0) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#f8f8f8,endcolorstr=#f8f8f8,gradientType=1);
background: -webkit-linear-gradient(left, rgba(248,248,248,0.3), rgba(248,248,248,1)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, rgba(248,248,248,0.3), rgba(248,248,248,1)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, rgba(248,248,248,0.3), rgba(248,248,248,1)); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, rgba(248,248,248,0.3), rgba(248,248,248,1)); /* 标准的语法(必须放在最后) */

旋转45度

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7,M12=-0.7,M21=0.7,M22=0.7,SizingMethod="auto expand");
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);


你可能感兴趣的:(CSS)