給圖片加陰影效果的CSS

給圖片加陰影效果的CSS

CSS代碼

.pic {
position:relative;
background:#CCC;
margin:10px;
}
.pic span {
display:block;
border:1px solid #333;
background:#FFF;
position:relative;
padding: 3px;
}
.right {/*陰影在右邊時*/
top:-4px;
left:-4px;
}
.left {/*陰影在左邊時*/
top:-4px;
right:-4px;
}

 

<ul>
<li class="pic"><span class="right"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
<li class="pic"><span class="left"><img src="pic_shadow.jpg" border=0 alt="pic" /></span></li>
</ul>

 

 html代碼