css3.0新属性效果在ie下的解决方案(兼容性)

css3.0增加的新属性,如投影、渐变、旋转、圆角等等!这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的。目前ie6、ie7、ie8浏览器不支持这些属性并不能说明ie就实现不了css3.0新属性的效果!我们收集整理了一些css3.0新属性效果在ie下的解决方案!

.box_round {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}

.box_shadow {
-moz-box-shadow: 0px 0px 4px #fff; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #fff; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #fff; /* Opera 10.5, IE 9.0 */
}

.box_gradient {
background-image: -moz-linear-gradient(top, #444, #999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444),color-stop(1, #999)); /* Saf4+, Chrome */
filter: progidXImageTransform.Microsoft.gradient(startColorStr='#444, EndColorStr='#999); /* IE6,IE7 */
-ms-filter: "progidXImageTransform.Microsoft.gradient(startColorStr='#444, EndColorStr='#999)"; /* IE8 */
}

.box_rgba {
background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */
filter: progidXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')"; /* IE8 */
}

.box_rotate { -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(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)"; /* IE8 */
zoom: 1;
}

.box_transition {
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
}

/* */@font-face {
font-family: 'WebFont'; src: url('myfont.eot'); /* IE6+ */
src: local('?'), url('myfont.woff') format('woff'), /* FF3.6 */
url('myfont.ttf') format('truetype'); /* Saf3+,Chrome,FF3.5,Opera10+ */
}

你可能感兴趣的:(css3)