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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <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(//files.jb51.net/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> <div id="profileavatar"> <i><i><i><i> </i></i></i></i> </div> 鼠标移上去显示圆滑的阴影 <input type="button" value="缩小图片" onclick="document.getelementbyid('image').width -=10;">
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]