纯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.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> </head> <body><i><i><i><i> <img src="http://www.jb51.net/images/logo.gif" width="215" id="image" onmouseover="show（）" onmouseout="show（）" /> </i></i></i></i>鼠标移上去显示圆滑的阴影 <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>

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