CSS 相容IE8的線性漸變和旋轉
阿新 • • 發佈:2019-01-02
因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);