<ptml> <pead> <title>css add shadow to picture </title> <style> *{padding:0;margin:0;} Body{background: #E8EDF1;p adding: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{padding:0 5px 6px 0;background-position:100% 100%; #profileAvatar img{visibility:visible;display:block;padding:3px;border:1px solid #ccc; background: #fff;} </style> </pead> <body> <div id= "Profileavatar" > <I><I><I&G t;<i> </i></i></i></i> </div> Mouse Move up to show sleek shadows <input type= "button" Val Ue= "Shrink the picture" onclick= "document.getElementById (' image '). Width-=10;"/> </body> <script type= "text/ JavaScript "> var imgbg=document.getelemeNtbyid (' Profileavatar '). getElementsByTagName (' I ') function show () {for (I=0;i </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
