管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

纯CSS实现的当鼠标移上图片添加阴影效果代码

<html> 
<head> 
<title>CSS给图片添加阴影</title> 
<style> 
*{padding:0;margin:0;} 
body{background:#E8EDF1;padding:20px;} 
#profileAvatar {overflow:hidden;zoom:1;} 
#profileAvatar i{float:left;visibility:hidden;background:url(http://files.glzy8.com/demoimg/200912/avatar.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 id="profileAvatar">                 
    <i><i><i><i> 
<a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com"><img src="http://www.glzy8.com/images/logo.gif" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fimages%2Flogo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /></a> 
    </i></i></i></i> 
</div> 
鼠标移上去显示圆滑的阴影

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程