跨浏览器兼容css3样式

IE9+才开始支持CSS3的一些属性，而对IE6-IE8我们习惯使用filter滤镜属性来进行实现。IE4-IE9都支持滤镜写法filter:progid:DXImageTransform.Microsoft.xx(attr1=xx,attr2=xx)

IE8又引入了特殊的-ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前:

-ms-filter:"progid:DXImageTransform.Microsoft.xx(attr1=xx,attr2=xx)"

需要声明的是，如果你要同时使用filter和-ms-filter，请将-ms-filter写在filter的前面。

不过，这种写法的寿命也不长，到IE10对filter与-ms-filter都已经不再支持。
IE 从4.0版开始，就提供了一些内置的多媒体滤镜特效，具体的使用方法是：

语法：
filter : filters 
 

参数：
filters : 　要使用的滤镜效果。多个滤镜之间用空格隔开。
 

说明：

设置或检索对象所应用的滤镜效果。

要使用该属性，对象必须具有height，width，position三个属性中的一个。

滤镜的机制是可扩展的。可以开发和使用第三方滤镜。

该属性在MAC平台上不可用。

对应的脚本特性为filter。

IE4.0以上版本，支持以下14种滤镜：

滤镜名    说明

Alpha     让HTML元件呈现出透明的渐进效果

Blur     让HTML元件产生风吹模糊的效果

Chroma     让图像中的某一颜色变成透明色

DropShadow     让HTML元件有一个下落式的阴影

FlipH     让HTML元件水平翻转

FlipV     让HTML元件垂直翻转

Glow     在元件的周围产生光晕而模糊的效果

Gray     把一个彩色的图片变成黑白色

Invert     产生图片的照片底片的效果

Light     在HTML元件上放置一个光影

Mask     利用另一个HTML元件在另一个元件上产生图像的遮罩

Shadow     产生一个比较立体的阴影

Wave     让HTML元件产生水平或是垂直方向上的波浪变形

XRay     产生HTML元件的轮廓，就像是照X光一样

一、阴影 box-shadow

/*标准浏览器*/
box-shadow: 0px 0px 3px #333;
/*firefox*/
-moz-box-shadow: 0px 0px 3px #333;
/*chrome*/
-webkit-box-shadow: 0px 0px 3px #333;
/*ie 8*/
background: #fff; //使用这个避免设置字体阴影
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4)";
或
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);
/*ie7*/
background: #fff; //使用这个避免设置字体阴影
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);
或
filter:shadow(color=#bbbbbb,direction=180,strength=4);

Shadow滤镜的基本语法：

filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4);

color代表投影的底色，该数值可用英文或16进制表示， 例如投影底色是蓝色的话，就应该设置color=blue或#000000。

direction参数是用来设置投影方向的，0代表上，90代表右，180代表下，270代表左，此外该数值45度为单位，它的默认值是向左的270度。

strength参数设置阴影向外扩散距离。

若四个方向都想留出阴影，则可写成：

filter: progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=0,strength=4) 

          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=90,strength=4) 

          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=180,strength=4)

          progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=270,strength=4); 

二、选择器nth-child()

css3的子孩子选择器ie8识别不了，可以使用 xx :first-child + xx 代替使用

/* equivalent to li:nth-child(1) */
ul li:first-child a {
border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
ul li:first-child + li a {
border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
ul li:first-child + li + li a {
border-top: 5px solid green;
}​