在我们编写CSS代码的时候，经常需要编写各种CSS浏览器前缀（CSS Vendor Prefixes）。但是我们为什么需要使用CSS浏览器前缀，以及什么时候使用CSS浏览器前缀呢？这里将会为大家一一介绍。
这篇文章将围绕以下几点来介绍CSS浏览器前缀：
- 什么是CSS浏览器前缀？
- 我们为什么需要使用CSS浏览器前缀？
- 我们应该如何正确的使用CSS浏览器前缀？
- 哪一些CSS属性需要使用浏览器前缀？
什么是CSS浏览器前缀？
CSS浏览器前缀是与各个浏览器引擎相关的字符串，它们通常放置在CSS属性的前面。它的格式通常为：
'-' + 浏览器前缀 + '-' + CSS属性名称
下面的表格中列出了常用浏览器和它们的相应浏览器前缀标识。
| 浏览器前缀 | 浏览器 |
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
例如，Firefox浏览器在使用CSS3 transform属性时的相应浏览器前缀代码为：
.example {
-moz-transform: value;
}
我们为什么需要使用CSS浏览器前缀？
每当新的CSS属性在被正式添加到W3C标准中之前，各个浏览器厂商都会使用自己的方法来测试和实现这些新的属性。
例如，当背景渐变属性被推出的时候，不同的浏览器厂商使用不同的方法来实现相同的效果。要创建一个简单的黑白渐变效果，我们需要编写以下一些代码：
.example {
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #000 0%, #fff 100%);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #000 0%, #fff 100%);
/* IE 6 - 9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
/* IE 10+ */
background: -ms-linear-gradient(top, #000 0%, #fff 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #000 0%, #fff 100%);
}
为了使测试阶段的各个浏览器之间有不同的实现，CSS2.1中规定了一套供应商前缀的策略（ vendor-prefixing policy）。每一个浏览器引擎都允许有自己的前缀，通过前缀和属性名称相结合，来实现各自浏览器的特定CSS属性的效果。各个浏览器在解析CSS代码时只会接受带自己浏览器前缀的代码，其它浏览器前缀的代码会被忽略。
当一个新的CSS属性成为了正式的W3C标准的时候，我们就可以不使用浏览器前缀了。在这个阶段，不带浏览器前缀的CSS属性在各个浏览器中的显示效果应该是一致的。
.example {
background: linear-gradient(top, #000 0%, #fff 100%);
}
虽然编写大量的CSS浏览器前缀代码十分的麻烦，但是我们可以在某个CSS属性成为W3C标准之前就在各个浏览器上测试和使用它们。
我们应该如何正确的使用CSS浏览器前缀？
正确的使用CSS浏览器前缀的方法是将浏览器前缀放置在CSS属性名称之前。例如：
.example {
-webkit-animation-name: slidein;
-o-animation-name: slidein;
-ms-animation-name: slidein;
-moz-animation-name: slidein;
animation-name: slidein;
}
我们这样做是为了利用CSS级联的特性，浏览器会使用最后一个它们能解析的属性。将不带CSS浏览器前缀的属性放置在最后面，可以在该属性成为W3C标准的时候，所有的浏览器都使用它来解析这个CSS属性。
哪一些CSS属性需要使用浏览器前缀？
需要使用浏览器前缀的CSS属性是经常发生变动的，你可以通过W3C的properties页面来查看有哪些已经成为标准的CSS属性。如果在这里找不到某个CSS属性，那么就说明该属性还在测试阶段，也许在不久的将来会成为W3C的标准，那么在使用这个属性的时候就需要为它添加CSS浏览器前缀。
以上的说法并不是绝对的，某些CSS属性可能不在此列之中。例如border-radius属性，在W3C的标准CSS属性中并没有它，但是所有的现代浏览器都支持不带浏览器前缀的border-radius属性，只有极少数版本的webkit和Firefox浏览器使用该属性需要带浏览器前缀，Opera 和IE则不需要带浏览器前缀。
这里有一个基于caniuse.com的数据制作的CSS浏览器前缀列表。列表中的所有CSS属性都需要添加CSS浏览器前缀。它的界面类似下图的样子：
