投影

使用css可以给投影效果很大的灵活性。

简单的css投影：

原理是将一个大的背景图像应用于容器div的背景，然后使用负边距偏移这个图像，从而显示出投影。

        <style>
            .img-wrapper{
                background: url(img/shadow.gif) no-repeat bottom right;
                clear: right;
                float: left;    //因为div是块级元素，背景的投影图会水平伸展，占据所有空间，而我们需要div包围图像，可以显示的设置div的宽度，但这样会限制这种技术的用途
　　　　　　　　　　　　　　　　　　//可以浮动div，让它收缩包围的效果。ie5.x不支持，可以对ie5隐藏样式。
                position: relative; //为了兼容ie6
            }
            .img-wrapper img{
                margin: 5px 5px 0px -5px;
                background: #fff;
                border: 1px solid #a9a9a9;
                padding: 4px;
                display: block;        //这两个属性为了兼容ie6
                position: relative;    //同上
            }
        </style>
    </head>
    <body>
        <div class="img-wrapper">
            <img src="img/dunstan.jpg" width="300px" height="300px" />
        </div>
    </body>

来自Clagnut的投影方法：

不使用外边距，使用相对定位来偏移图像。

            .img-wrapper{
                background: url(img/shadow.gif) no-repeat bottom right;
                float: left;
                line-height: 0;
            }
            .img-wrapper img{
                background: #fff;
                border: 1px solid #a9a9a9;
                padding: 4px;
                position: relative;
                left: -5px;
                top: -5px;
            }

box-shadow:需要四个值，垂直水平偏移，投影的宽度，颜色

            .img-wrapper{
                -webkit-box-shadow: 3px 3px 6px #666;
                -moz-box-shadow:3px 3px 6px #666;
                box-shadow: 3px 3px 6px #666;
            }

            .img-wrapper{
               background: url(img/shadow.gif) no-repeat bottom right;
               float: left;
               line-height: 0;
           }
           .img-wrapper img{
               background: #fff;
               border: 1px solid #a9a9a9;
               padding: 4px;
               position: relative;
               left: -5px;
               top: -5px;
           }