在網頁中插入圖片是再平常不過的事情了，但更多的時候為了美觀的需要，我們要給圖片加上陰影，圖片數量較多的時候，工作量是非常大的。重復勞動而且沒有工作效果。我們有沒有辦法用CSS給圖片加陰影呢？

　　CSS中有一個概念大家應該都不生疏，那就是相對定位position:relative; 。我們應該學會靈活的運用CSS所提供的屬性。給圖片加陰影我們就可以用position:relative; 相對定位的辦法來實現。

　　我們看下面的css代碼：


　　我們在XHTML中插入圖片，以下是XHTML代碼：


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

　　我們運行下面的代碼看最終的效果：


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