<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>
时间： 2024-11-03 22:22:47