使用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;
}