请问你知道css怎么给图片加阴影效果吗

在网页中插入图片是再平常不过的事情了，但更多的时候为了美观的需要，要给图片加上阴影，图片数量较多的时候，工作量是非常大的。重复劳动而且没有工作效果。有没有办法用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/*去除图片下方的空隙*/

}

我们在制作网页的时候可以用CSS3添加边框，那么如果要给边框添加阴影该怎么做呢？下面我给大家分享一下。

工具/材料

SublimeText

首先打开Sublime Text软件，新建一个HTML文档，如下图所示

然后在html文档的Body区域插入一个div，如下图所示

接下来给div定义一些样式，注意其中的box-shadow就是定义边框阴影的，如下图所示

最后我们运行界面程序，你会看到边框已经被添加上阴影了，如下图所示

---