DIV投影(css3和IE滤镜)

<!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>&nbsp;</p>
<p>&nbsp;</p>
<div class="con2">
<a href="http://www.baidu.com" >test</a>
</div>
</body>
</html>

第一个种方法因为定位,背景不能与自动适应高度,但投影效果最好

第二种的投影效果有点偏差,但背景能自动适应,而且少很多代码, 权衡用之吧!目前都没发现BUG

posted @ 2011-02-14 19:25  Unintended  阅读(802)  评论(0编辑  收藏  举报