css 各种浏览器兼容前缀写法

参考链接：https://www.cnblogs.com/xmlys/p/7716134.html

CSS浏览器前缀兼容写法

1、浏览器引擎前缀(VendorPrefix)有哪些？

-moz-/*火狐等使用Mozilla浏览器引擎的浏览器*/

-webkit-/*Safari,谷歌浏览器等使用Webkit引擎的浏览器*/

-o-/*Opera浏览器(早期)*/

-ms-/*InternetExplorer(不一定)*/

浏览器内核前缀

IEtrident-ms-

Firefoxgecko-moz-

Googlewebkit/blink-webkit-

Safariwebkit-webkit-

Operapresto-o-

2、主要的需要添加浏览器引擎前缀(vendor-prefix)的属性包括：

@keyframes

移动和变换属性(transition-property,transition-duration,transition-timing-function,transition-delay)

动画属性(animation-name,animation-duration,animation-timing-function,animation-delay)

border-radius

box-shadow

backface-visibility

column属性

flex属性

perspective属性

3、例子：

/*简单属性*/

.myClass{

-webkit-animation-name:fadeIn;

-moz-animation-name:fadeIn;

-o-animation-name:fadeIn;

-ms-animation-name:fadeIn;

animation-name:fadeIn;/*不带前缀的放到最后*/

}

/*复杂属性keyframes*/

@-webkit-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-moz-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-o-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

@-ms-keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

/*不带前缀的放到最后*/

@keyframesfadeIn{

0%{opacity:0;}100%{opacity:0;}

}

4、对于一些属性：border-radius,linear-gradient,和box-shadow,你可以使用CSS3Pie，它是一个很小的文件，把它放到你的网站的根目录下，就能让你的页面中IE6，IE8中也支持这些属性。