在網(wǎng)頁設(shè)計中中插入圖片是再平常不過的事情了,有時為了美觀的需要,可以給圖片加上陰影,讓圖片有一種特殊的效果,CSS可以為圖片加上陰影嗎?答案是肯定的,在本例中將給讀者介紹在制作網(wǎng)頁時為圖片加陰影的方法。
【操作步驟】
第1步,啟動Dreamweaver,新建文檔,保存為index.html。
第2步,構(gòu)建網(wǎng)頁基本結(jié)構(gòu)。頁面的結(jié)構(gòu)很簡單,只有兩個<div>標簽,在每個<div>標簽中都包含了一個<div>標簽和一個<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è)置。
第3步,定義圖片的陰影。其實給圖片加陰影的原理很簡單,就是運用兩個<div>塊的相對位置偏移而實現(xiàn),陰影的寬度和顏色深淺由用戶決定,也就是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; /*陰影在右邊時*/
left: -6px;}
.left {
top: -6px; /*陰影在左邊時*/
right: -6px;
給外層的<div>定義一個類樣式為pic,設(shè)置其position屬性為relative,也就是相對定位。設(shè)置它的背景色為#CCC,設(shè)置四周補白10px,并使兩圖之間距離為50px。最后,定義其為左浮動。
對內(nèi)層<div>進行設(shè)置:首先仍然是設(shè)置其position屬性為relative,這也是本例最關(guān)鍵的一步,之后設(shè)置內(nèi)層div的背景色為#FFF,并設(shè)置邊框樣式和內(nèi)邊距padding。left和right類樣式分別定義了左側(cè)圖片的內(nèi)側(cè)<div>的偏移量和右側(cè)圖片的內(nèi)側(cè)<div>的偏移量,這句話可能有些饒舌,請讀者仔細理解,也就是說我們在網(wǎng)頁設(shè)計時必須讓內(nèi)側(cè)的<div>進行位移,而左側(cè)圖片的位移方向與右側(cè)圖片是不同的,所以分別用left和right來進行設(shè)置。