CSS 兼容问题

背景

在看到一些css源码的时候，发现有些属性前面带有-moz，-webkit等前缀。

-moz-

代表firefox浏览器私有属性

-ms- 代表IE浏览器私有属性

-webkit-代表safari、chrome私有属性

-o- 代表Opera

这样写的目的

• 这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。
• 现在比较流行的一个概念就是：不太关键的样式，可以不考虑兼容，比如你说的圆角，并不影响内容的显示，如果客户浏览器太旧，就让他看到旧的方形效果就是，一定要看到新效果，只能建议客户升级浏览器。

Tips

• Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
• Firefox、Chrome 以及 Safari 支持所有新的边框属性。
• 对于 border-image：Safari 5 以及更老的版本需要前缀 -webkit-。
• Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。