Question

可以用CSS为图片加阴影吗？

Answer 1

在网页中插入图片是再平常不过的事情了，但更多的时候为了美观的需要，我们要给图片加上阴影，图片数量较多的时候，工作量是非常大的。重复劳动而且没有工作效果。我们有没有办法用CSS给图片加阴影呢？

　　CSS中有一个概念大家应该都不陌生，那就是相对定位position:relative; 。我们应该学会灵活的运用CSS所提供的属性。给图片加阴影我们就可以用position:relative; 相对定位的办法来实现。关于position属性可以参考这里。

　　我们看下面的css代码：

.waiwei {
position:relative;
background:#eee;
margin:0 auto;
width:200px;
}
.tupian {
background:#fff;
border:1px solid #c00;
padding:0;
position:relative;
top:-5px;
left:-5px;
}
.tupian img {
vertical-align:bottom; /*去除图片下方的空隙*/
}

Answer 2

楼上的这种办法不太理想的，应该滤镜只会支持IE浏览器；
可以做两个层叠加，下面的层用单色做为阴影色；

Answer 3

filter : progid:DXImageTransform.Shadow(color=#003399,direction=135,strength=5);