1. 程式人生 > >CSS 相容IE8的線性漸變和旋轉

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);