关于CSS3样式中的前缀问题

作为新手，有的时候在写css时分不清什么属性需要用到前缀，或者用什么前缀，下面是我平时学习的一些总结。

在了解这些前缀之前，先介绍一下各大主流浏览器的内核：

• IE——trident（国内很多双核浏览器的其中一核就是trident）
• Opera——Blink（presto已废弃）
• chrome——Blink（之前是webkit）
• Firefox——Gecko
• Safari——webkit（Android手机使用频率最高的也是webkit内核）

而每个内核都有自己的前缀：

•     Trident内核：前缀为-ms-
•     Gecko内核：前缀为-moz-
•     Presto内核：前缀为-o-
•     Webkit内核：前缀为-webkit-

所以：

• -moz- 代表firefox浏览器私有属性
• -ms- 代表IE浏览器私有属性
• -webkit- 代表safari、chrome私有属性
• -o- 代表Opera私有属性

CSS属性需要带各浏览器的前缀，下面介绍一些常用的需要加上前缀的属性（新增属性）：（具体的属性请参考链接：http://css.doyoe.com/   里面所有橙色显示的属性都需要加前缀）

　　box-shadow，border-radius，background-origin，background-clip，text-shadow，zoom，transform，transition，animation.....

其实这些属性前缀的问题现在不是太大的问题了，因为会有一些工具替我们去解决，比如下面这款插件：

      Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixe添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置。

Autoprefixer不仅会为你的属性加上前缀，还会修复语法差异，清理过期的前缀。具体使用方法请参考文章：http://www.bcty365.com/content-146-5024-1.html