我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况，那是因为浏览器内核不同而导致的兼容性问题。
首先我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox浏览器），WebKit（熟悉的有Chrome，Safari等浏览器），Trident（IE浏览器），
CSS3的前缀是一个浏览器内核常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分，所以浏览器在没有支持标准的CSS3之前都会有自己的方法，就是加前缀：
常用的css前缀有
-webkit /*Chrome/Safari*/
-moz /*Firefox*/
-ms /*IE*/
当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候，就不需要前缀了。
目前常用的前缀属性：
1.省略
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
2.变型转换
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
3.渐变
background: -webkit-gradient(linear,00,0100%, 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(#eeeeee0%,#aaaaaa100%); /** 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 **/