<!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; box-shadow:0 0 10px #000; /*影子效果*/ -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; margin:5p 9px; /*这里值等于shadow的一半，且要和下面的滤镜半径统一*/ position:absolute; z-index:1; border: 5px solid #dedede; /*圆角效果 （带边框）*/ -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ } .ieShadow { width:200px; height:100px; filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5); background-color:#0009; } .con2{ 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不行*/ /* /*圆角效果 （无边框）*/ background:#FC9; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; } a{ display:block; height:150px; text-align:center;} </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>
效果如下：
