CSS滤镜

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

效果如下:

原文地址:https://www.cnblogs.com/Journey31/p/2915773.html