CSS3中Opacity透明度等一些特效

Opacity 透明度
透明度属性是 CSS 中非常常用和流行的一个属性，目前已经广泛被主要浏览器支持，可惜的是 IE6/7/8 均不支持该属性。虽然 IE 没有支持这个 CSS 属性，但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相同效果。
建议IE下的滤镜CSS在头部这样写

1 2 3

<!--[if IE]>      <link rel="stylesheet" href="css/ie.css"> <![endif]-->

以下用的代码都可写在ie.css中

IE浏览器中透明度

代码示例

1 2 3

opacity:  0.4 ;  /*Chrome、Safari、Firefox、Opera */ filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 40 );  /* IE6/IE7/8 */ -ms-filter:  "progid:DXImageTransform.Microsoft.Alpha(opacity=40)" ;  /*  IE8 */

第一行是在其他浏览器中使用 Opacity 属性；第二行是 IE6/7/8 中使用滤镜属性设置透明度；第三行是新的 IE 滤镜属性，它只在 IE8 中起作用在其他浏览器中会被忽略，如果不是针对 IE8 设置，使用第二行代码就可以了。参数的设置与 CSS 中 Opacity 属性也基本相同，在 IE 滤镜中使用 0-100 表示透明度，因此 opacity=40 相当于 Opacity 属性为 0.4，亦即透明度为 40%。使用该滤镜属性有两个缺点：由于使用了 Microsoft 特有的属性，会使得你的 CSS 非验证的；另外，IE 的滤镜属性会使得所有的 HTML 子节点都继承这个属性。

border-radius 圆角效果

代码示例

1 2 3 4

-moz-border-radius:  15px ;  /*Firefox*/   -webkit-border-radius:  15px ;  /*Safari、Chrome*/   border-radius:  15px ;  /*Opera 10.5+、IE 6+*/   behavior:  url (ie-css 3 .htc);  /* 调用脚本添加圆角效果 脚本文件自行搜索下载*/

圆角效果是 CSS3 中另一个非常常用和流行的效果。它使得程序员不再需要费力的拼装很多圆角图片或者使用大量复杂的 JavaScript 来实现的相同的效果。在很大程度上圆角属性简化了 HTML 代码结构，同时优化了显示效果。然而 IE 全系列浏览器依然不支持这个属性。幸运的是 Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。

Box Shadow 盒阴影

Box Shadow 的滤镜实现代码

1 2 3

-moz-box-shadow:  2px 2px 3px #969696 ;  /* Firefox 3.5+ */   -webkit-box-shadow:  2px 2px 3px #969696 ;  /* Safari and Chrome */   filter: progid:DXImageTransform.Microsoft.Shadow(color= '#969696' , Direction= 145 , Strength= 3 );

Box Shadow 的 VML 脚本实现

1 2 3 4

-moz-box-shadow:  2px 2px 3px #969696 ;  /* Firefox */   -webkit-box-shadow:  2px 2px 3px #969696 ;  /* Safari and Chrome */   box-shadow:  2px 2px 3px #969696 ;  /* Opera 10.5+、IE6+*/   behavior:  url (ie-css 3 .htc);  /* 调用脚本添加阴影效果 */

面两种方法均可实现这个效果。但是要注意的是，IE 滤镜效果语法与其他浏览器中 CSS3 属性语法不同。因此需要开发人员仔细调试使得在不同浏览器中看起来有相同的效果。

Text Shadow文本阴影

文字阴影在不仅流行于打印效果中，同时也在 Web 设计中也非常流行。然而对于 Text Shadow 这个属性我们就没有那么好运气了，IE 没有提供相应的滤镜效果，也没有现成的 VML 脚本可以使用。在过去的 Web 开发中，我们通常使用图片来实现文字阴影效果。Kilian Valkhof为了解决 IE 下实现文字阴影这个难题，而编写了一个 jQuery 的插件。
IE 浏览器中实现 Text Shadow 效果代码

1 2 3 4

text-shadow :  #aaa 5px 5px 8px ;   $(document).ready(function(){   $( ".text-shadow" ).textShadow();   });<

下载了 jQuery 核心包和 Drop Shadow 插件后我们就可以在 IE 中使用文字阴影效果了。textShadow() 方法还可以填入一个 JavaScript 对象参数，如下所示：

属性名类型默认值默认值

left	整型	4	阴影距离
布尔	整型	4	阴影角度
blur	整型	2	阴影扩散度
opacity	0-1 小数	0.5	阴影透明度
color	颜色值	black	字体阴影颜色
swap	布尔	false	是否换行

渐变色

CSS3 中的渐变色为渐变背景色提供了很大的方便，我们不必为了渐变的背景色使用大量细小的图片，同时也不用为了适应浏览器分辨率做很多工作。尽管 IE 浏览器还是不支持该属性，我们依然可以通过 IE 是由的滤镜属性实现该效果。
IE浏览器中实现渐变色代码

1 2 3 4 5 6 7

background-image : -moz-linear-gradient( top ,  #81a8cb ,  #4477a1 );  /* Firefox 3.6 */ background-image : -webkit-gradient(linear, left bottom , left top , color-stop( 0 ,  #4477a1 ),color-stop( 1 ,  #81a8cb ));  /* Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= '#81a8cb' , endColorstr= '#4477a1' );  /* IE6 & IE7 */ -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType= 0 , startColorstr= '#81a8cb' , endColorstr= '#4477a1' )";  /* IE8 */

我们可以使用 IE 的私有的滤镜来实现该效果。其中 GradientType 可以有两个选项值 0 和 1，分别代表水平渐变和垂直渐变。startColorstr 和 endColorstr 分别代表渐变开始的颜色值和结束的颜色值。虽然参数和功能不如 CSS3 中的渐变多，但是对已一般的需求来说也算够用了。另外该滤镜属性在 IE6/7 和 IE8 中支持的语法不相同，因此我们需要写不同的代码去做 IE6/7 和 IE8 的兼容处理。

IE浏览器中滤镜实现RGBA 颜色效果

CSS3 中提供了另一种方式设置背景透明度，那就是 RGBA 颜色。RGBA 颜色使得开发人员在指定颜色时，不仅可以指定 R、G、B 三原色的值，同时还可以指定颜色的透明度。这样我们就就可以在浏览器中实现类似 Windows7 中一样透明的玻璃效果，这大大增强了 Web 程序的视觉感官体验。在 IE 全系列浏览器中依然不支持 RGBA 颜色，我们只能利用 IE 滤镜模拟实现这样的效果。
IE浏览器RGBA颜色实现代码

1 2	background : rgba( 50 ,  95 ,  224 , . 3 ); filter:progid:DXImageTransform.Microsoft.gradient(GradientType= 0 ,startColorstr= '#4B6287a7' , endColorstr= '#4B6287a7' );

DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。

RGBa颜色还可以用于border，不过，不同的浏览器对于border的RGBa支持不太一样，不过唯一的不同是，Firefox在border的拐角处会出现叠加，比如透明度是0.4，那么在Firefox中，四个角的透明度会变成0.8，而支持RGBa的非FF浏览器不会出现这种情况。

Rotation 旋转

在最新的 Firefox 和 Webkit 浏览器中都对 CSS3 形变和动画效果做了不同程度的支持。你可以旋转、拉伸、平移一个 HTML 元素来实现以前只能用图片实现的立体效果，也可以使用 CSS 属性来实现绚丽的淡入、淡出等动画效果。目前 IE 全系列浏览器还不支持该属性，但是很少有人知道使用 IE 的滤镜可以实现简单的 HTML 元素旋转的效果。
IE浏览器中实现旋转代码

1 2 3

-webkit-transform: rotate( 90 deg);   -moz-transform: rotate( 90 deg);   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation= 1 );

最后一行代码在 IE 中实现旋转效果。其中的参数 rotation 的选项为 1、2、3 和四，分别代表旋转 90 度、180 度、270 度和 360 度。和 CSS3 中的旋转 360 度功能相比，IE 中的旋转滤镜功能就显得十分有限了，每次 90 度的旋转很难满足开发人员的需求。

本文针对部分 IE 不支持的 CSS3 效果以及在 IE 浏览器上的替代方案做了详细的介绍。希望能为广大开发者在处理IE浏览器的时候提供一点帮助