合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

一款CSS实现图片添加圆滑阴影效果!

2011-03-27 16:50:27建站知识 206

       如何用css鼠标经过给图片添加个阴影效果呢?做网站的应该没有想过自己如何实现它呢?那就和合肥工作室一起来看看如何来实现这种效果吧!其实做起来很简单,关键是你想不想去做!有没有一颗坚持的心,相信自己,我能行,没有什么不可以!我先把代码贴出来吧!HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<div id="profileAvatar">    HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 <i><i><i><i> HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
<a href=http://www.lz-studio.net><img src="/jscss/demoimg/wall_s3.jpg" width="180" id="image" onmouseover="show()" onmouseout="show()" /></a>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 </i></i></i></i>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</div>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

 <script type="text/javascript">HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 var imgBg=document.getElementById('profileAvatar').getElementsByTagName('i')HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 function show(){HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  for(i=0;i<imgBg.length;i++)HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  { HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   if(imgBg[i].style.visibility=='visible')HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   imgBg[i].style.visibility='hidden';HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   elseHmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
   imgBg[i].style.visibility='visible'HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
  }HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 }HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</script>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<style>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
*{padding:0;margin:0;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
body{background:#E8EDF1;padding:20px;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar {overflow:hidden;zoom:1;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar i{float:left;visibility:hidden;background:url(/jscss/demoimg/200912/avatar.gif) 0 0 no-repeat;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar i i{background-position:100% 0; }HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar i i i{background-position:0 100%;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar i i i i{padding:0 5px 6px 0;background-position:100% 100%; }HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
#profileAvatar  img{visibility:visible;display:block;padding:3px;border:1px solid #ccc;background:#fff;}HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
</style>HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

说下实现的思路,我们利用JS和CSS结合,适应大小不同的图片,值得大家尝试一用哦!HmF合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

本文关键词
CSS阴影效果