PostCSS通过Autoprefixer插件自动添加浏览器前缀，需安装postcss和autoprefixer，并配置.browserslistrc或package.json指定目标浏览器范围，再通过webpack的postcss-loader或CLI命令集成，实现CSS前缀自动化处理。
PostCSS 是一个强大的 CSS 处理工具，可以通过插件机制实现自动添加浏览器前缀。要实现自动前缀添加，主要依赖 Autoprefixer 插件，它基于 Can I Use 的数据，根据目标浏览器范围自动为 CSS 属性添加 -webkit-、-moz-、-ms- 等前缀。
安装 PostCSS 和 Autoprefixer
在项目中使用 PostCSS 需要先安装相关依赖：
npm install postcss autoprefixer --save-dev如果使用构建工具（如 Webpack），还需要安装对应的 loader：
npm install postcss-loader --save-dev配置目标浏览器范围
Autoprefixer 根据你指定的浏览器兼容范围决定是否添加前缀。推荐通过 .browserslistrc 文件配置：
立即学习“前端免费学习笔记（深入）”；
> 1%last 2 versions
not dead
这表示支持全球使用率大于 1% 的浏览器、每个浏览器的最新两个版本，且不包含已停止维护的浏览器。
也可以在 package.json 中添加 browserslist 字段：
"browserslist": [ "> 1%", "last 2 versions", "not dead" ]
集成到构建流程（以 Webpack 为例）
在 webpack.config.js 中配置 postcss-loader，并启用 autoprefixer：
module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') ] } } } ] } ] }这样，所有经过 postcss-loader 处理的 CSS 文件都会自动补上前缀。
直接使用 PostCSS CLI（可选）
如果不使用构建工具，也可以用命令行处理 CSS 文件：
npx postcss src/style.css -o dist/style.css --use autoprefixer这条命令会读取 src/style.css，应用 autoprefixer 并输出到 dist/style.css。
基本上就这些。只要配置好浏览器范围并正确接入构建流程，PostCSS 就能帮你自动处理兼容性前缀，无需手动写 -webkit-transform 这类重复代码。
