您的位置：首页 > Web前端 > CSS

CSS完美实现图片阴影效果

2010-11-10 22:51 1156 查看

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航