純CSS實現的當滑鼠移上圖片添加陰影製作效果代碼

<br /><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.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> <i><i><i><i><br /><br /> </i></i></i></i><p>滑鼠移上去顯示圓滑的陰影 </p><p><input type="button" value="縮小圖片" onclick="document.getElementById('image').width -=10;">