<style>
div { 
  width: 500px; color: #009;
  margin: auto;
  border: 1px solid #66c;
  -webkit-columns: 2 20px;
  -webkit-column-rule: 1px solid #ccc;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -moz-column-rule: 1px solid #ccc;
  columns: 2;
  column-gap: 20px; 
  column-rule: 1px solid #ccc;
}
</style>

以上是一段css样式。

我们可以看到有这么重复的几个属性：columns、column-rule、column-gap。
这几个属性前面有的加了前缀“-webkit-”，“ -moz-”。
类似的这种前缀作用一般都是去设置不同浏览器的特定样式。

现在就来介绍一下几个常见的css属性前缀：

- 1、-moz-：代表firefox浏览器私有属性
- 2、-ms-：代表ie浏览器私有属性
- 3、-webkit-：代表safari、chrome私有属性
- 4、-o-：代表Opera

这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

对于 border-image：Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。