一款CSS实现图片添加圆滑阴影效果！ - 合肥建站工作室

扫一扫微信二维码

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

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

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

<div id="profileAvatar">
<i><i><i><i>
<a href=http://www.lz-studio.net><img src="/jscss/demoimg/wall_s3.jpg" width="180" id="image" onmouseover="show()" onmouseout="show()" /></a>
</i></i></i></i>
</div>

<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>

<style>
*{padding:0;margin:0;}
body{background:#E8EDF1;padding:20px;}
#profileAvatar {overflow:hidden;zoom:1;}
#profileAvatar i{float:left;visibility:hidden;background:url(/jscss/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>

说下实现的思路，我们利用JS和CSS结合，适应大小不同的图片，值得大家尝试一用哦！

本文关键词: CSS阴影效果

免费电话咨询
18955177249
QQ咨询