在網(wǎng)頁中插入圖片是再平常不過的事情了，但更多的時(shí)候?yàn)榱嗣烙^的需要，我們要給圖片加上陰影，圖片數(shù)量較多的時(shí)候，工作量是非常大的。重復(fù)勞動(dòng)而且沒有工作效果。我們有沒有辦法用CSS給圖片加陰影呢？

　　CSS中有一個(gè)概念大家應(yīng)該都不生疏，那就是相對(duì)定位position:relative; 。我們應(yīng)該學(xué)會(huì)靈活的運(yùn)用CSS所提供的屬性。給圖片加陰影我們就可以用position:relative; 相對(duì)定位的辦法來實(shí)現(xiàn)。

　　我們看下面的css代碼：


　　我們?cè)赬HTML中插入圖片，以下是XHTML代碼：


　　這個(gè)問題中的CSS和XHTML我們都應(yīng)該能看明白，原理也非常清楚。就是利用了相對(duì)定位，將圖片定位與容器錯(cuò)開并填表充色彩，最終形成了陰影的效果。

　　我們運(yùn)行下面的代碼看最終的效果：


　　至此，這一效果順利的完成了。什么？不夠美觀？應(yīng)該還可以做的更精致些？這些工作就交給追求完美的你去完成了�，F(xiàn)在我們將上面的代碼稍加改變，形成一定的padding內(nèi)邊距；并修改一下色彩，也感覺美觀多了。