純CSS實現(xiàn)的當鼠標移上圖片添加陰影效果代碼

2019-11-21 00:52:59

字體：大中小

供稿：網(wǎng)友

<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(//files.VeVB.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   class="iwvjtn8m0"   id="profileAvatar">                     <i><i><i><i> <a href="http://m.survivalescaperooms.com"><img src="https://www.jb51.net//m.survivalescaperooms.com/images/logo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /></a>     </i></i></i></i> </div> 鼠標移上去顯示圓滑的陰影   <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需刷新才能執(zhí)行]

上一篇：JavaScript 未知高度元素垂直居中實現(xiàn)代碼

下一篇：Div+Js實現(xiàn)的帶陰影菜單微軟以前網(wǎng)站曾用過