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

最新推荐文章于 2021-07-28 10:36:54 发布

weixin_39612961

最新推荐文章于 2021-07-28 10:36:54 发布

阅读量1.4k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_39612961/article/details/80962393

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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