• 投影一：简单方法
  1.html中

<div class="img-wrapper">
![](1.jpg) </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