為何對于有的css屬性要加上-webkit、-o等前綴

例如：

div
{
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
  border-image:url(border.png) 30 30 round;
}

解釋：這些前綴稱為瀏覽器引擎前綴(vendor prefix)，這些前綴是為了實現瀏覽器兼容；很抽象是吧，舉個具體的栗子吧：

w3c說css中要加個font-color屬性，用于指定文本的邊框顏色，但是 ,這個font-color屬性目前只是個草案噢，能不能成為標準還不一定;</br>

瀏覽器A老實巴交的在渲染器中實現了該功能，而瀏覽器B比較狡猾，不實現font-color屬性，而實現了B-font-color屬性，公司X通過了解后寫了以下代碼：

#mytext{
  B-font-color:red; /*在B瀏覽器中文字顯示紅色邊框*/
  font-color:red; /*在A瀏覽器中文字顯示紅色邊框*/  
}

寫好以后，前端開發(fā)和瀏覽器廠商都很happy啊，不錯，達到了預期目的；就這樣平安無事的過了n年；</br>

n年后，w3c認為，在草案中將font-color設為文字的邊框不合理，所以最終的標準將font-color設為了文字的顏色；既然成為標準了，那么，以后的前端程序員和瀏覽器都必須按標準來;</br>

瀏覽器B不緊不慢的在其渲染引擎中添加了font-color屬性，而A就有點尷尬了，已經實現了了font-color功能，怎么辦，只能改唄，A就對外宣布，以后font-color屬性不再代表文字邊框顏色，改為字體顏色；</br>

這一改，公司X不干了，說好的邊框紅色，怎么在A上運行時給我去掉了，嚴重影響了我界面的美觀，譴責！從此，A瀏覽器漸漸衰弱下去；</br>

你也可能說，不對啊，由于w3c新標準的發(fā)布，B的字體顏色也變了啊，為啥不譴責它呢，這是因為B沒有去掉X公司原來有的樣式，只是按照標準增加了效果，而這由于新標準帶來的影響，你X公司要譴責就譴責w3c去，誰叫他不一開始就出臺標準，而弄個草案呢,B竊喜，反正沒我責任；</br>

由此可見，瀏覽器前綴是瀏覽器廠商為了盡快實現草案中的內容，又為了以后的草案標準化而耍的“小聰明”；

為何要把不帶前綴的屬性寫在最后

這是因為css屬性具有后面屬性覆蓋前面屬性的特性，例如：

  #mytext{
    background:red;
    background:green; /*mytext的綠色背景將覆蓋紅色背景*/
  }

用戶在草案期編寫的代碼，在w3c確定標準后，就能以最后的不帶前綴的屬性覆蓋所有前面沖突的屬性，實現自動的向標準看齊的作用；

常用的前綴列表

想了解瀏覽器內核的發(fā)展，請看--全面了解瀏覽器內核發(fā)展史。