CSS完美实现图片阴影效果 

<title>无标题文档</title>
<style type="text/css">
   /*方法一：使用一个GIF文件的方法*/
   .gifshadow 
   {
    padding:4px 10px 10px 4px;
    border:0;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    background-image: url(shadow.gif);/*换成你的图片*/
    background-repeat: no-repeat;
    background-position: right bottom;
   }
   /*方法二：使用滤镜*/
   .cssshadow 
   {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
   }
   /*方法三：使用2个PNG图片，滑动门技术，可实现柔边阴影*/
   .pngshadow{
            float:right;
    background:url(right_buttom.png) no-repeat bottom right;
    padding:0 10px 10px 0;
            
        }
        .pngshadow div{
    background:url(left_top.png) no-repeat ;
        }
        .pngshadow img {
            border:1px solid #FFFFFF;
            padding:4px;
        }
</style>
</head>
<body >
效果1:
<img class="gifshadow" src="1.jpg"/>

效果2:
<img class="cssshadow" src="1.jpg" />

效果3:
<div class="pngshadow">
<div><img src="1.jpg" /></div>
</div>
</body>
</html>


源码资源文件下载：html.rar

http://www.rupeng.com/forum/viewthread.php?tid=14033&pid=101125&page=2&extra=#pid101125

posted @ 2010-11-10 22:51  BuildNewApp  阅读(20245)  评论(0)  编辑  收藏  举报