现在的位置: 首页 > 综合 > 正文

CSS完美实现图片阴影效果

2012年05月22日 ⁄ 综合 ⁄ 共 1085字 ⁄ 字号 评论关闭
<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

抱歉!评论已关闭.