ie中使用滤镜实现css3的效果

1】圆角

-mo-border-radius:2px;

-webkit-border-radius:2px;

border-radius:2px;

2】阴影

-mo-box-shadow:2px 2px 2px #f00;

-webkit-box-shadow:2px 2px 2px #f00;

box-shadow:2px 2px 2px #f00;

fliter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=‘#f00’);

-ms-fliter:“progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=‘#f00’);”

3】渐变

background-image:-mo-linear-gradient(top,#fff #f00);

background-image:webkit-gradient(linear,top left,bottom right,color-stop(0,#fff),color-stop(1, #f00));

fliter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f00', GradientType='0');

-ms-fliter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff',endColorstr='#f00', GradientType='0')";

4】透明

background:#f00;

background:transparent;

fliter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99f00',endColorstr='#99f00');

-ms-fliter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#99f00',endColorstr='#99f00')";

zoom:1;

background-color:rgba(180 180 140,0.6);

5】字体

@font-face {

  font-family: 'MyFont';

  src: url('myfont.eot'); /* IE6+ */

  src: local('myfont.ttf'),

  url('myfont.woff') format('woff'), /* FF3.6 */

  url('myfont.ttf') format('truetype'); /* FF3.5+, Saf3+,Chrome,Opera10+ */

}

6】旋转

 -moz-transform: rotate(7.5deg); /* FF3.5+ */

 -o-transform: rotate(7.5deg); /* Opera 10.5 */

 -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */

 filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand');

 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='auto expand')"; /* IE8 */

原文地址:https://www.cnblogs.com/xiaonvziyi/p/3225429.html