CSS3中-moz-或-webkit-是什么意思？

本文转载自http://www.utubon.com/post/1594.html

或许，你在一些css的书中已经读到了相关的解释，但本文试图简明清晰的回答这个问题，让你直截了当的了解它们的关系和意义。

CSS3中新增了一些属性，例如box-reduis、box-orient、text-overflow等等，而这些属性在以往的版本中是不存在的，或者不被支持的，因此，针对不同的浏览器，规定其内核名称让它们可以对这些新增属性进行解析。这看上去是一个合理的解释，即-moz-是针对firefox的，-webkit-是针对safari和chrome的。

但实际上，现在并非所有浏览器都支持CSS3新的属性，其中以firefox、chrome、opera最为典型，它们尽可能想要去兼容最新的标准或规定，但却发现要实现这些支持还是有一定的难度。目前有很多属性都还在实验阶段，例如我们非常熟悉的box-shadow，虽然它确实在新的CSS3标准中出现了，但却不能被任何浏览器支持，也就是说就目前的状况我们写下面这段代码将不会发生任何效果：

#test{
    box-shadow:2px 2px 2px #ccc;
}

无论是IE老版本的浏览器，还是上面说的三种目前对CSS3还比较敢于尝试的浏览器。它们任何一个都不会解析这个语句。但实际上，mozilla和webkit正在对此进行实验和开发，试图有一天可以支持它。对于CSS开发者来说，他们发现了这个，并在前面添加-moz-或-webkit-来声明：即使你们在实验阶段，我们仍然坚持使用你们当前开发的成果，无论显示出来的效果是好是坏。

大多数浏览器的前缀包括：

-moz- : Firefox
-webkit- : Safari & Chrome
-o- : Opera
-khtml- : Konqueror
-ms- : Internet Explorer
-chrome- : Google Chrome专用前缀

于是，开发者可以将代码写成：

#test{
    -moz-box-shadow:2px 2px 2px #ccc;
    -webkit-box-shadow:2px 2px 2px #ccc;
    box-shadow:2px 2px 2px #ccc;
}

注意它们之间的顺序，不带浏览器核心前缀声明的一则放在最后。这样，一旦box-shadow被其他浏览器支持，那么最后一则将会生效，一旦firefox对该属性的支持被确定，最后一则也会覆盖前面的。除了对新增属性进行实验声明外，还能对新增值进行类似的声明。

#test{
    display:-moz-box;
    display:-webkit-box;
}

这将让当前的框模型在firefox和webkit核心的浏览器（支持或正在试验display:box）中生效。

总之，-moz-或-webkit-是不同于CSS Hack的浏览器实验性属性（值）前缀声明，将强制对应核心浏览器正在实验阶段的css属性或值使用实验成果进行解析。这也就是为什么同样的一个属性（指新增的实验中的属性），不同的浏览器显示的效果不同，因为它们可能还在实验中。