IE下模拟css3中的box-shadow(阴影)

在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜

基本语法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值));

注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。IE下模拟css3中的box-shadow(阴影)代码:

.box-shadow{

 

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/

background-color: #eee;

-moz-box-shadow:2px 2px 5px #969696;/*firefox*/

-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/

box-shadow:2px 2px 5px #969696;/*opera或ie9*/

}

HTml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE下模拟css3中的box-shadow(阴影)</title>
<style type="text/css">
.box-shadow{
width:300px;height:300px;margin:30px auto 0;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
background-color:#eee;
-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
box-shadow:2px 2px 5px #969696;/*opera或ie9*/
}
</style>
</head>
<body>
<div class="box-shadow">111</div>
</body>
</html>

posted on 2010-10-26 16:55  刘迪  阅读(2064)  评论(0编辑  收藏  举报

导航