- 投影一：简单方法
1.html中
<div class="img-wrapper">
 </div>
2.css中
.img-wrapper{
background: url(../pic/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
.img-wrapper img{
margin: -5px 5px 5px -5px;/*设置偏移值：上右下左*/
background-color: #fff;
border:1px solid #a9a9a9;/*加边框，有相框的效果*/
padding: 4px;
position: relative;
}
3.效果
1.png
- 投影二：来自Clagnut的投影方法
1.html同上
2.css代码
.img-wrapper{
background: url(../pic/shadow.gif) no-repeat bottom right;
line-height:0;
float: left;
}
.img-wrapper img{
background-color: #fff;
border:1px solid #a9a9a9;
padding: 4px;
position: relative;
left: -5px;
top: -5px;
}
img{
box-shadow: 3px 3px 6px #666;
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
}
3.说明
box-shadow属性在css3中。这个属性要4个值：垂直和水平偏移、投影的宽度（模糊程度）和颜色。
试验性的css3属性，需要使用Safari和FireFox扩展
4.效果
2.png
- 附录：素材（如下为一张带阴影边框的图片）
shadow.gif
