写在前面：这篇文章是对css知识的一种补充，主要是介绍一下浏览器前缀的作用和常见用法，帮助我们去理解和处理常见的浏览器中css属性不生效的问题。

为什么会出现浏览器前缀

这个要从css的发展来说，因为每次css属性从诞生到成为标准都需要经过草案到逐渐标准化的过程。在标准还未确定的时候，部分浏览器就已经根据最初草案实现了部分功能，为了与标准进行兼容，因此每个浏览器都使用自己的私有属性与标准进行区分。当标准确定后，就可以不需要浏览器前缀了。

常见的浏览器前缀

浏览器前缀是和浏览器内核息息相关的，下面是一些常见内核的浏览器前缀

-ms-: IE浏览器私有属性（Trident内核）
-moz-: 火狐浏览器私有属性（Gecko内核，moz代表的是Firefox的开发商Mozilla）
-webkit-: 苹果、微软和谷歌浏览器前私有属性
-o-: Opera浏览器私有属性（Presto内核已废弃，Blink内核）

常用的需要写浏览器前缀的css属性

很多css3属性在使用的时候都需要使用浏览器前缀。因为很多老版的浏览器都不支持

border-radius: 边框圆角属性
transition: 过渡属性
@keyframes和animation属性

在webpack项目中如何自动生成浏览器前缀

csss属性非常多，如果每次用到私有属性都需要手动添加浏览器前缀的话是一件很复杂的事情，所有我们会在项目中使用插件或者导入js文件的方式自动给需要添加浏览器前缀的css属性添加浏览器前缀。这里我们以插件autoprefixer为例演示如何通过插件自动给项目添加浏览器前缀.

在vue3.0cli中

安装安装autoprefixer的时候还要安装PostCSS, PostCSS是用来处理css文件的loader，处理完成之后才能使用autoprefixer给css属性添加浏览器前缀。
```
npm i postcss postcss-loader autoprefixer -D
```

配置新建一个配置文件postcss.config.js

 module.exports = {
   plugins: {
     autoprefixer: {}
   }
 }

在package.json文件中添加浏览器列表

 "browserslist": [
   "> 1%",
   "last 2 versions",
   "not dead",
   "not ie 11",
   "ie >= 9",
   "safari >= 6",
   "ios >= 6",
   "android >= 4.4",
   "firefox >= 28",
   "chrome >= 24",
   "Opera >= 10"
 ]

使用直接在vue文件中写css属性，比如：
```
display: flex;
```
在浏览器中查看样式时，会加上浏览器前缀：
```
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
```

特殊说明

如果我们写了某个属性之后发现没有添加浏览器前缀，不一定是autoprefixer没有生效，而是很有可能是我们设置的浏览器列表正好支持我们写的这个css属性，不需要添加浏览器前缀。对于我们不确定的情况，可以采用以下这两个网站去查一下当前浏览器的支持情况； www.w3schools.com/cssref/css3…

caniuse.com/

在vue2.0中

安装

npm install autoprefixer postcss postcss-loader -D

配置将目录/build/vue-loader.conf.js中配置成如下代码

 module.exports = {
   loaders: utils.cssLoaders({
     sourceMap: isProduction
     ? config[buildEnv].productionSourceMap
     : config.dev.cssSourceMap,
     extract: isProduction
   }),
   postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]
 }

修改/build/utils.js

postcss: generateLoaders(['css?-autoprefixer'])

使用重启项目之后在vue文件中添加css属性，如果是私有属性的话，那么在浏览器中就会添加浏览器前缀了。