CSS3的標准並沒有全部定稿，目前CSS3的標准分成了不同的模塊，具體的標准由各個模塊推動標准和定稿，標准制定的過程中，瀏覽器也在不斷的發新的版本來兼容新的標准。
瀏覽器有時會給一些在試驗階段或非標准階段的css屬性添加前綴, 這樣開發者就可以使用 瀏覽器行為的改變不會破壞標准. 開發人員應等待包含無前綴屬性，直到瀏覽器行為標准化。
1. 主流瀏覽器引擎前綴
-webkit- (谷歌, Safari, 新版Opera瀏覽器等)
-moz- (火狐瀏覽器)
-o- (舊版Opera瀏覽器等)
-ms- (IE瀏覽器 和 Edge瀏覽器)
只有在新的css3的實驗性的屬性前需要添加前綴，目前大部分常用的css3新屬性都可以直接舍棄前綴。查看瀏覽器兼容css3屬性情況請參考：caniuse網站
.wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } 2. vscode插件實現css3前綴的自動化處理
由於添加前綴工作都是否枯燥和沒有意義，這些工作可以直接交給開發工具或者第三方的工具來自動化的實現處理。而vscode也有對應的自動化的插件進行自動化的添加代碼前綴。
vscode 自動化插件: Autoprefixer，可以自動化的給css、less、sass文件進行自動化的添加css3前綴。
使用方法：ctrl + shift + p 然后輸入 autoprefixer 選擇回車執行命令。
由於此插件是對npm包：Autoprefixer的封裝，所以如果使用此插件對css進行預處理需要安裝好node和安裝上Autoprefixer包。
# 第一步： 安裝node # 第二步：全局安裝Autoprefixer插件包 $ npm i -g autoprefixer # 第三步： 用vacode的插件處理css文件（html文件不行） # 如果npm安裝很慢或者總是失敗，請設置淘寶的npm包鏡像。直接在node安裝完了后執行如下命令。然后就可以happy的安裝npm的第三方包了。 $ npm config set registry https://registry.npm.taobao.org 3. js輔助腳本解放手寫前綴
為了解決手工書寫前綴的問題，最早的一個解決方案是由Lea Verou提供的一個-prefix-free腳本。
只需要在.html文件中插入一個prefixfree.js文件（可以是文檔任何地方），建議把這個腳本文件放在樣式表之后。
添加這個腳本之后，使用CSS3的屬性時，只需書寫標准樣式即可。但是這種做法將所有壓力交給了客戶端來處理。如此一來頁面解析壓力就大了，性能會打一定的折扣，並且一旦腳本加載失敗，那么就會出現瀏覽器無法正常渲染CSS3的樣式風格。
prefixfree腳本僅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。
4. 自動化構建工具
自動化構建工具：webpack、gulp、grunt都可以實現css3屬性前綴的自動化添加。在此我只演示一下gulp的應用。
gulp自動化配置和安裝演示：
第一步：安裝node環境（已安裝，略過)
第二步：安裝gulp的全局的包(已安裝，略過)
$ npm i -g gulp 第三步：初始化項目的npm配置文件和初始化安裝要gulp和gulp的插件的項目本地插件包。
$ npm init -y # 初始化項目的npm配置文件 $ npm i -S gulp # 安裝gulp到本地項目（僅開發時使用，S大寫） $ npm i -S gulp-autoprefixer # 安裝gulp-autoprefixer插件（為css3屬性添加前綴） $ npm i -S gulp-rename # gulp的重命名插件 第四步：在項目根目錄下創建一個名為 gulpfile.js 的文件
var gulp = require('gulp'), // 引用gulp autoprefixer = require('gulp-autoprefixer'), // 添加引用前綴的gulp插件 rename = require("gulp-rename"); // 引用重命名的gulp插件 gulp.task('t1', function () { gulp.src('./css/**/*.css') // 設置要處理的原始的文件位置 .pipe(autoprefixer()) .pipe(rename({ suffix: ".min", // 添加后綴 extname: ".css" // 文件擴展名 })) .pipe(gulp.dest('./css/')); // 最終文件輸出的位置 }); 可以根據你的情況修改路徑，當前默認是你項目根目錄下有個css目錄，自動為css目錄下面的所有文件自動創建一個*.min.css對應文件，就是最終使用的，這里沒有進行壓縮，如果需要壓縮可以添加gulp的壓縮插件。
第五步：接下來在命令終端進入gulpfile.js文件的目錄執行
$ gulp t1 可以在項目中看到新生成的文件了。
gulp 在線文檔：地址
5. sass、less等預處理語言
sass和less等css的預處理語言配合響應的編譯工具也可以實現對css3中的新屬性的自動化加前綴處理。后續文章會有介紹，在此不贅述。
6. 漸進增強和優雅降級
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
聯系老馬
對應視頻地址：https://qtxh.ke.qq.com/
老馬qq： 515154084
老馬微信：請掃碼
