css3兼容总结

1. background-size

&＃xff08;调节背景图片尺寸&＃xff09;

background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;


2. background-origin

background-origin 属性规定背景图片的定位区域。 背景图片可以放置于 content-box、padding-box 或 border-box 区域

-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;


3. border-radius

border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */


4. box-shadow

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;


5. box-sizing

IE、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */


6. text-shadow

Internet Explorer 9 以及更早的版本&＃xff0c;不支持 text-shadow 属性。

7. transition

过渡

Internet Explorer 9 以及更早的版本&＃xff0c;不支持 transition 属性。

transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */


8. CSS3 2D

IE10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-

IE9 需要前缀 -ms-

transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */


9. CSS3 3D

IE10 和 Firefox 支持 3D 转换。

Chrome 和 Safari 需要前缀 -webkit-

Opera 仍然不支持 3D 转换

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */


10. 动画

IE10、Firefox 以及 Opera 支持 &＃64;keyframes 规则和 animation 属性

Chrome 和 Safari 需要前缀 -webkit-

IE9&＃xff0c;以及更早的版本&＃xff0c;不支持

10.1 动画捆绑到元素

animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */


10.2 定义动画过程

&＃64;keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}&＃64;-moz-keyframes myfirst /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}&＃64;-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}&＃64;-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}