关于兼容

参考 巧用浏览器CSS属性值的不兼容向下兼容hack技巧

box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);

效果：IE9+出现边框阴影，IE8-出现边框

IE9+才支持box-shadow。

虽然border所有浏览器都识别，但是rgba色却是IE9+浏览器才支持，于是，我们就可以巧妙利用IE8-浏览器不识别rgba色值这一特性，实现我们的向下兼容处理。

由于IE8浏览器不认识rgba颜色表示，因此，在IE8眼中，它看到的是：

box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);

在IE9+眼中，它看到的是：（因为被覆盖了）

box-shadow: 0 1px 3px rgba(0,0,0,.25);
border: 1px solid #d0d0d5;
border: 0 rgba(0,0,0,.2);

理论上，直接使用rgba(0,0,0,0)也是可以实现我们的效果的，少了1个字符，本来挺好。但是，如果你在Sass中写出border: 0 rgba(0,0,0,0);，则会被Sass自以为是地编译成border: 0 transparent，我靠，这个可就差了十万八千里了，虽然看表现rgba(0,0,0,0)和transparent是一个东西，都是透明，但是，对于border属性而言，rgba(0,0,0,0) IE9+浏览器才能识别，transparent从IE7浏览器就开始识别了。于是乎，IE7，IE8浏览器下，本要出现的边框就这样直接被干掉了，妥妥的bug啊！为了规避这个让人无语的问题，这才使用了rgba(0,0,0,.2)。

哪些CSS属性IE10支持，IE9不支持了，除了transition和animation，那就是gradient背景渐变