在網(wǎng)頁(yè)設計中中插入圖片是再平常不過(guò)的事情了，有時(shí)為了美觀(guān)的需要，可以給圖片加上陰影，讓圖片有一種特殊的效果，CSS可以為圖片加上陰影嗎？答案是肯定的，在本例中將給讀者介紹在制作網(wǎng)頁(yè)時(shí)為圖片加陰影的方法。

【操作步驟】

第1步，啟動(dòng)Dreamweaver，新建文檔，保存為index.html。

第2步，構建網(wǎng)頁(yè)基本結構。頁(yè)面的結構很簡(jiǎn)單，只有兩個(gè)<div>標簽，在每個(gè)<div>標簽中都包含了一個(gè)<div>標簽和一個(gè)<img>標簽，分別定義了一左一右兩幅圖片。

<div class="pic">

<div class="left">

<img src="images/2.jpg" border=0 alt="pic" />

</div></div><div class="pic">

<div class="right">

<img src="images/1.jpg" border=0 alt="pic" />

</div></div>

此時(shí)的頁(yè)面極其簡(jiǎn)單，只有兩張圖片，沒(méi)有任何樣式的設置。

第3步，定義圖片的陰影。其實(shí)給圖片加陰影的原理很簡(jiǎn)單，就是運用兩個(gè)<div>塊的相對位置偏移而實(shí)現，陰影的寬度和顏色深淺由用戶(hù)決定，也就是CSS中的相對定位屬性position:relative;。

.pic {    position: relative;    

background: #CCC;    

margin: 10px;    

margin-right: 50px;    

float: left;}

.pic div {    position: relative;    

border: 1px solid #333;    

background: #FFF;    

padding: 3px;}.right {    top: -6px;        /*陰影在右邊時(shí)*/    

left: -6px;}

.left {    

top: -6px;       /*陰影在左邊時(shí)*/    

right: -6px;

給外層的<div>定義一個(gè)類(lèi)樣式為pic，設置其position屬性為relative，也就是相對定位。設置它的背景色為#CCC，設置四周補白10px，并使兩圖之間距離為50px。最后，定義其為左浮動(dòng)。

對內層<div>進(jìn)行設置：首先仍然是設置其position屬性為relative，這也是本例最關(guān)鍵的一步，之后設置內層div的背景色為#FFF，并設置邊框樣式和內邊距padding。left和right類(lèi)樣式分別定義了左側圖片的內側<div>的偏移量和右側圖片的內側<div>的偏移量，這句話(huà)可能有些饒舌，請讀者仔細理解，也就是說(shuō)我們在網(wǎng)頁(yè)設計時(shí)必須讓內側的<div>進(jìn)行位移，而左側圖片的位移方向與右側圖片是不同的，所以分別用left和right來(lái)進(jìn)行設置。