<!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=utf-8" />
<title>DIV投影（css3和IE濾鏡）</title>
<style type="text/css">
.wrap {
width:200px;
position:relative;
}
.con{
width:200px;
background:#00f;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
margin:5px\9; /*這里值等於shadow的一半，且要和下面的濾鏡半徑統一*/
position:absolute;
z-index:1;
}
.ieShadow {
width:200px;
height:100px;
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
background-color:#000\9;
}
.con2{
background-color:#00F;
width:200px;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #000;
/*position防止IE6下有<a>的時候虛線框偏移,幸好不會因為設置了定位和濾鏡而導致<a>不能點擊的問題*/
position:relative;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#666666') progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=90, Color='#666666') progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#666666') progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=270, Color='#666666');/*這里的顏色要寫6位數，寫成#666不行*/
}
a{ display:block; height:150px;}
</style>
</head>
<body>
<div class="wrap">
<div class="con"> <a href="http://www.baidu.com" >test</a> </div>
<div class="ieShadow"></div>
</div>
<p> </p>
<p> </p>
<div class="con2">
<a href="http://www.baidu.com" >test</a>
</div>
</body>
</html>
實現5個像素漸變效果