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 #ffffff; / FF3.5+ / -webkit-box-shadow: 0px 0px 4px #ffffff; / Saf3.0+, Chrome / box-shadow: 0px 0px 4px #ffffff; / Opera 10.5, IE 9.0 / }

.box_gradient { background-image: -moz-lear-gradient(, #444444, #999999); / FF3.6 / background-image: -webkit-gradient(lear,left ,left bottom,color-s(0, #444444),color-s(1, #999999)); / Saf4+, Chrome / filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); / IE6,IE7 / -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; / IE8 / }

.box_rgba { background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); / FF3+, Saf3+, Opera 10.10+, Chrome / filter: progid:DXImageTransform.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(sizgMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104); / IE6,IE7 / -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizgMethod='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+ / }



/
btw- up/down keys work, along with your mouse wheel. ;)
g soon.. extra css transforms (skew, scale), text-shadow and more.
plz leave feedback here.

Notes:
+ Multiple IE filters must be ma delimited a sgle declaration. They are not additive separate blocks.
+ The closest thg to box-shadow for IE is Blur with makeShadow but you need a duplicate div.

© 2010; a Paul Irish and Jonathan Neal jot, association w/ Boaz Sender and Zoltan Hawryluk.

if you like this, you'll probably also dig yayQuery. <3
/