使用过CSS3属性的同学都知道，CSS3属性都需要带各浏览器的前缀，甚至到现在，依然还有很多属性需要带前缀。这是为什么呢？
我的理解是，浏览器厂商以前就一直在实施CSS3，但它还未成为真正的标准。为此，当一些CSS3样式语法还存在波动时，它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有：
Trident内核： 主要代表为IE浏览器
Gecko内核： 主要代表为Firefox
Presto内核： 主要代表为Opera
Webkit内核： 产要代表为Chrome和Safari
而这些不同内核的浏览器，CSS3属性（部分需要添加前缀的属性）对应需要添加不同的前缀，也将其称之为浏览器的私有前缀，添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性：
Trident内核： 前缀为 -ms
Gecko内核： 前缀为 -moz
Presto内核： 前缀为 -o
Webkit内核： 前缀为 -webkit
来看一个简单的示例，早期写一个圆角 border-radius ，需要这样写：
.box {-moz-border-radius: 5px
-webkit-border-radius: 5px
-o-border-radius: 5px
border-radius: 5px
}
这样编写代码，无形之中给前端人员增加了不少工作量，于是开始有人在讨论这个问题“如何在编写CSS时不需要添加浏览器的私有前缀，又能让浏览器识别？”
-prefix-free
为了解决手工书写前缀的问题，最早的一个解决方案是由 Lea Verou 提供的一个 -prefix-free脚本。你只需要在你的 .html 文件中插入一个 prefixfree.js 文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。
添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。
现在很多小伙伴喜欢在互联网上找视频资料学习网页制作，但是光看视频你是不可能学会网页制作的，没有人指导你，而且很多视频已经过时了 并没有什么用! 如果你真的想学习网页制作这门技术，你可以来这个群，前面是573，中间是82〇，最后是49〇， 在这里有最新的HTML课程 免费学习 也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 不是愿意学习或者自认不需要学习的就不要加了。
prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。
编辑器插件
除了prefixfree脚本之外，很多同学依赖于文本编辑器的插件来处理。这里来看看Sublime Text编辑器里是如何实现Autoprefixer功能的。
要在编辑器中安装 Autoprefixer 插件，首先需要你的环境中已经安装好了 Node.js 。你可以在命令终端执行：
node -v来检测是否已安装，如果没有安装，请先安装。在这里假设你已具备Node.js环境。
现在开启你的Sublime Text编辑器，你可以同时按下 command + Shift + p 三个键，选择"Install Package"。然后搜索 Autoprefixer 。
现在你在你的Sublime Text中使用Autoprefixer功能。假设你在样式文件中输入：
.box {transform: rotate(45deg)
border-radius: 5px
box-shadow: 1px 1px 0 rgba(0,0,0,.25)
transition: all .2s ease .1s
}
这个时候你只需要同时按下 Command + Shift + P 三个键，选择“Autoprefix CSS”，并且回车，就能得到下面这样的代码：
.box {-webkit-transform: rotate(45deg)
transform: rotate(45deg)
border-radius: 5px
box-shadow: 1px 1px 0 rgba(0,0,0,.25)
transition: all .2s ease .1s
}
如下图所示：
注：不同的配置，执行的效果不一样。详细可以点击 这里 查阅。
预处理器中的混合宏
随着CSS预处理器越来越普及，部分同学开始采用预处理器中的混合宏来处理CSS3前缀的事项。比如说 Compass ，里面就是使用Sass的mixin为CSS3需要带前缀的属性定制了一些mixin。还有类似于Stylus中的 nib 等。预处理器中的混合宏确实可以解决很多问题，但也产生了新的问题，就是它所使用的语法是全新的，如果要使用就必须重新学习，另外这类工具的演进速度通常都会跟不上浏览器的发展速度，这样也会造成其产生的CSS有过时的问题，有时候为了解决一些问题，还需要自己去写 mixins 。比如：
正如前面所说的，如果要跟上浏览器的演进，就需要不断的更新你的CSS3 mixins,不然就会造成你的代码不是最新的。其中Compass就存在这样的问题：
@import "compass".box {
@include border-radius(5px)
}
编译出来的CSS：
.box {-moz-border-radius: 5px
-webkit-border-radius: 5px
border-radius: 5px
}
而现实却不尽人意，因为到写这篇文章为止，我们写圆角属性只需要：
.box {border-radius: 5px
}
各主流浏览器就能正常的解析。造成这个原因的时，Compass中的CSS3的mixin没有跟上步子去更新定义好的mixins
总的来说：这是CSS3.0的对于文章段P容器的定义方法语句！display:block这个样式，只定义了P容器为一个块
后面四句是CSS3中的样式定义方法；
-webkit-margin-before: 1em
-webkit-margin-after: 1em
分别定义p的上边距和下边距的数值是1倍字体高度，如10px像素的字，那么边距就为10px
-webkit-margin-start: 0px
-webkit-margin-end: 0px
上面二句则定义为左右边距都为0PX，这个应该好理解；
所以以上
p {
display: block
-webkit-margin-before: 1em
-webkit-margin-after: 1em
-webkit-margin-start: 0px
-webkit-margin-end: 0px
}
相当于CSS2.0中的
p {
display: block
margin-top: 1em
margin-bottom: 1em
margin-right: 0px
margin-left: 0px
}
但由于CSS3.0要求浏览器版本较高，所以国内并没有流行CSS3.0样式，依然以CSS2.0为主流，但以后应该是CSS3.0的天下，因为它代表着先进性。
下面是讲下它的由来：
其实这就是W3C样的CSS3的一个定义P容器内容的样式：
“-webkit-margin-before”、“-webkit-margin-after”，“-webkit-margin-start”，“-webkit-margin-end”
这个是CSS3阶段提出的一个属性，现在甚至连草案都没进，目前只有webkit支持。
before、after、start、end是用在对文本的。比如说，中文和英文是从左到右，从上到下阅读的，那么，before = top， start = left，end = right，after = bottom。这叫做“writing-mode”，简单来说就是书写方式。
但是，日文的书写方式就不一样了，他们是从上至下，从右到左书写的。那么在这种write-mode下，before = right， start = top，end = bottom，after = left。
margin-before的用意就是，不论是哪种writing-mode，我们都可以设定“开始那边的边距”这样的内容，而不需要为了适应不同的writing-mode写几种margin。
关于writing-mode，w3c有详细的介绍，看完就懂了。
webkit指的是一种HTML排版引擎，作用就是把根据HTML和CSS的代码显示出页面。最初是Apple公司的一个开源项目，他们自家的浏览器Safari有用。之后Google也使用这个排版引擎加上自己的V8 Javascript引擎建立了一个开源的浏览器项目Chromium，并且利用这个项目只做了自家的浏览器Chrome。同时这两家在移动平台上的浏览器也是用Webkit内核的。因此，随着iOS和安卓移动终端的普及，用Webkit的浏览器也越来越多。而得益于Chromium引擎，在PC平台上也有很多Webkit浏览器，比如360呀，世界之窗呀，枫树浏览器呀，太阳花浏览器呀，搜狗浏览器呀，遨游3呀，猎豹浏览器呀。基本上说自己是双核，有什么极速模式的，都是用的Chromium。相对应的，微软的IE浏览器用的是Trident排版引擎，也就是常说的IE核心，火狐浏览器也有自己的Gecko排版引擎。
而Apple的iBooks同样也用了webkit作为排版引擎，所以iBooks和webkit内核的浏览器有很多相似之处。而Sigil这个编辑软件，用的则是Chromium，因此也是webkit内核的。看看Sigil的预览模式就知道它肯定是用的Chromium了。
在CSS属性能中，我们常常能看到-webkit-，-moz-之类的前缀，这种就叫做浏览器私有前缀，是浏览器对于新CSS属性的一个提前支持。-webkit-是webkit内核的，-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。
为什么要有私有前缀呢？因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius这种写法。
比方说，Chrome 10是不认border-radius这种写法的，只能用webkit-border-radius，而Chrome12就能认了。于是在写CSS的时候，这样写就能确保Chrome10和Chrome12浏览网页的时候都能够正确显示。
-webkit为chrome和Safari使用的私有前缀-moz为火狐使用的私有前缀
一些还未成标准的css属性需要添加私有前缀
具体有哪些可以参见caniuse.com中的兼容性指南
