css3属性兼容性

背景：      background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/
            background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
            background: -o-linear-gradient(top, #eee, #aaa);/** Opear **/ 
            background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);/** IE9 IE10 **/ 
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/ 
            -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/ }

圆角：

border: 2px solid #C0C0C0;    

         -moz-border-radius: 10px;    

         -webkit-border-radius: 10px;    

         border-radius: 10px;    

         position:relative;    

         z-index:2;    

         behavior: url(此处为ie-css3.htc文件的绝对路径); 

阴影：    -webkit-box-shadow: 2px 3px 4px #000;
          -moz-box-shadow: 2px 3px 4px #000;
          box-shadow: 2px 3px 4px #000;
          filter: 
          progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=90),
          progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=180);  

旋转：

transform:rotate(360deg);
-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

使用
animation:myfirstec 8s linear;
-moz-animation:myfirstec 8s linear; /* Firefox */
-webkit-animation:myfirstec 8s linear; /* Safari and Chrome */
-o-animation:myfirstec 8s linear; /* Opera */

 

 

@keyframes myfirst
{
0% {transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-moz-transform:rotate(0deg); /* Firefox */}

100% {transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Firefox */}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-moz-transform:rotate(0deg); /* Firefox */}

100% {transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Firefox */}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-moz-transform:rotate(0deg); /* Firefox */}

100% {transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Firefox */}
}

@-o-keyframes myfirst /* Opera */
{
0% {transform:rotate(0deg);
-webkit-transform:rotate(0deg); /* Safari and Chrome */
-moz-transform:rotate(0deg); /* Firefox */}

100% {transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari and Chrome */
-moz-transform:rotate(360deg); /* Firefox */}
}