1. -webkit-

       WebKit渲染引擎使用，该引擎是Safari浏览器的核心，也是早期Chrome浏览器（直到Chrome 28版本）的基础。使用-webkit-前缀的属性主要是为了支持Safari和旧版Chrome中的特定功能。例如，-webkit-border-radius用于在旧版浏览器中创建圆角边框。

2. -moz-

        Mozilla Firefox浏览器特有的，用于支持在Firefox中实现但尚未成为标准CSS功能的属性。例如，-moz-border-radius和-moz-box-shadow在Firefox中用来创建圆角边框和阴影效果，在CSS3正式标准出台前。

3.-o-

        Opera浏览器的专有前缀，用于支持Opera浏览器中特有的CSS属性。例如，-o-border-radius用于在Opera中创建圆角边框。然而，随着Opera浏览器转向使用Blink引擎（与Chrome相同），对-o-前缀的支持逐渐减少。

4.作用

        这些前缀的存在是为了让开发者能够在CSS标准最终确定之前，测试和实现新的布局和样式特性。然而，随着现代浏览器的发展和CSS标准的完善，这些前缀的使用已经大大减少。大多数现代浏览器都支持无前缀的标准CSS属性，因此在使用新特性时，建议首先检查它们是否已被广泛支持，并尽量避免依赖这些前缀，除非是在必须支持旧版浏览器的特殊情况下。

.transition { 
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}