純CSS實現鼠標移上圖片添加陰影效果_圖片特效特效

這個效果挺實用，當把鼠標放到一幅靜止的圖片上，圖片的四周邊框會出現陰影，具有立體感的效果，代碼是第二次修正，能適應大小不同的圖片，值得大家嘗試一用哦。

<html>
<head>
<title>CSS給圖片添加陰影</title>
<style>
*{padding:0;margin:0;}
body{background:url(http://p1.mb5u.com/texiao/1/20110225160536505.gif) 0 0 no-repeat;}
#profileAvatar i i{background-position:100% 0; }
#profileAvatar i i i{background-position:0 100%;}
#profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; }
#profileAvatar  img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;}
</style>
</head>
<body>
<div   class="bxh5x5d"   id="profileAvatar">				
	<i><i><i><i> 
<a href="http://www.wf0088.com"><img src="http://p1.mb5u.com/texiao/1/20110225160536506.jpg" width="180" id="image" onmouseover="show()" onmouseout="show()" /></a>
	</i></i></i></i>
</div> 
鼠標移上去顯示圓滑的陰影
<br />
<br />
<input type="button" value="縮小圖片" onclick="document.getElementById('image').width -=10;" />
</body>
<script type="text/javascript">
	var imgBg=document.getElementById('profileAvatar').getElementsByTagName('i')
	function show(){
		for(i=0;i<imgBg.length;i++)
		{	
			if(imgBg[i].style.visibility=='visible')
			imgBg[i].style.visibility='hidden';
			else
			imgBg[i].style.visibility='visible'
		}
	}
</script>
</html>

所屬頻道：圖片特效特效/更新時間：2012-11-19

[收藏][報錯][返回列表]

相關圖片特效特效：

純CSS實現鼠標移上圖片添加陰影效果_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些