CSS3中webkit私有前綴的含義是什么

這篇文章主要講解了“CSS3中webkit私有前綴的含義是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS3中webkit私有前綴的含義是什么”吧！

　　css3作為頁面樣式的表現語言，增加了很多新的屬性，但是部分css3屬性在一些瀏覽器上還處于試驗階段，所以為了有效的顯示css3的樣式，對應不同的瀏覽器內核需要不同的前綴聲明，例如：

　　CSS3中webki私有前綴

　　-moz-：Firefox，GEcko引擎

　　-webkit-：Safari和Chrome，Webkit引擎

　　-o-：Opera（早期），Presto引擎，后改為Webkit引擎

　　-ms-：InternetExplorer，Trident引擎

　　使用這些前綴，才能保證css3的屬性在特定瀏覽器渲染引擎下生效。統一引擎一般不識別其它引擎的前綴，目前移動端的瀏覽器相對比較統一，都是采用的webkit引擎，所以如果我們只需要兼容移動端，只需要帶-webkit-前綴即可。

　　CSS3中webki私有前綴注意事項

　　在使用css3新屬性的時候，一般需要把帶有前綴的屬性放于前面，把不帶前綴的版本放到最后一行：

　　1-webkit-box-shadow:05px5pxrgba(0,0,0,.5);

　　2-moz-box-shadow:05px5pxrgba(0,0,0,.5);

　　3-o-box-shadow:05px5pxrgba(0,0,0,.5);

　　4box-shadow:05px5pxrgba(0,0,0,.5);

　　隨著瀏覽器的升級，目前大多數新版本瀏覽器都已經支持不帶前綴的寫法了，所以帶前綴只是為了兼容低版本，不帶前端的才是標準屬性。

　　那么如果想移除這些前綴，同時又滿足兼容的辦法也是有的。我們可以選擇Autoprefixer工具，一個以最好的方式處理瀏覽器前綴的后處理插件，無論你是用webpack、gulp、grunt還是fis，它都能完美配合。

　　使用Autoprefixer你可以完全忘記有CSS前綴這東西，盡管按照最新的W3C規范來正常書寫你的CSS而不需要瀏覽器前綴。像這樣：

　　1a{

　　2display:flex;

　　3}

感謝各位的閱讀，以上就是“CSS3中webkit私有前綴的含義是什么”的內容了，經過本文的學習后，相信大家對CSS3中webkit私有前綴的含義是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！