或許，你在一些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屬性或值使用實驗成果進行解析。這也就是為什么同樣的一個屬性（指新增的實驗中的屬性），不同的瀏覽器顯示的效果不同，因為它們可能還在實驗中。
補充說明：在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瀏覽網頁的時候都能夠正確顯示。