css和css3属性的兼容性

下面我只显示了有兼容性的属性（不全）：

都是我最近试验的，每个属性在浏览器上都试验过了，请放心！哈哈

css兼容性属性：

opacity

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。


inherit

任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
       
clip

首先你要注意：clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用。clip无法在设置“position:relative”和“position:static”上工作
在chrome1.0+、firefox1.0+、opera7.0+、safari1.0+和ie8.0+都支持标准语法，但在ie4.0至ie7.0我们还是需要做一定的处理，需要把每个属性值之间的逗号去掉
.my-element {
 
  position: absolute;
  clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}


需要特别的注意，ie4-ie7的要写在标准语句的前面，不然其他浏览器下将会无任何效果。

     :focus


ie8以及更高版本支持

   content


ie8以及更高版本支持

    attr()


ie8以及更高版本支持
a:after { content: "("attr(href)")"; font-size: 12px; }

outline

ie8+

    display:table-cell


ie8+

css3兼容性属性：

border-radius


ie9+


box-shadow


ie9+


border-image


ie11+




background-size


ie9+


background-origin


ie9+


background-clip


ie9+


linear-gradient


ie10+  只能用在background-image




text-shadow


ie10+


@font-face


ie9+  Firefox、Chrome、Safari 以及 Opera 支持 .ttf  和 .otf  类型的字体。Internet Explorer 9+ 支持 .eot 类型的字体。


:root


ie9+


:not


ie9+


:empty


ie9+


:last-child


ie9+


:nth-child()


ie9+


:nth-last-child


ie9+


transform   2d


ie9+


transform   3d


ie10+


perspective


ie10+


transition


ie10+


animations


ie10+


column


ie10+


resize


ie不兼容


box-sizing


ie8+


outline-offset


ie不兼容


flex


ie10+