纯CSS实现的当鼠标移上图片添加阴影效果代码

ttx9n · 发表于 2009-12-22 23:07:56

这个效果挺实用，当把鼠标放到一幅静止的图片上，图片的四周边框会出现阴影，具有立体感的效果，代码是第二次修正，能适应大小不同的图片，值得大家尝试一用哦。

<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.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> 
<a href="https://www.jb51.net/www.jb51.net"><img src="https://www.jb51.net/www.jb51.net/images/logo.gif" width="215" id="image" onmouseover="show()" onmouseout="show()" /></a> 
    </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需刷新才能执行]

64000928 · 发表于 2022-10-24 23:08:02

呵呵呵呵呵呵

feiyasqhr · 发表于 2022-11-3 10:29:31

先把创新班才能下班才能下班

gyalp · 发表于 2022-12-23 20:56:42

女生看了弄丢了卡萨诺的卡洛斯

u6h2m4 · 发表于 2023-3-2 04:43:54

额UI废物iuhfujewfiewnnfen

jasonlong · 发表于 2023-7-21 20:55:17

还有人在不。。。。。。。。。。啊

x20yd3qx · 发表于 2023-8-24 17:25:07

感谢楼主分享

q42obh · 发表于 2023-8-31 12:06:35

看看看咋么

dm00ji1s · 发表于 2023-9-14 22:28:50

哈哈哈哈哈哈哈

q215357618 · 发表于 2023-9-15 09:01:50

dfdsafdsfdsfdsf

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 纯CSS实现的当鼠标移上图片添加阴影效果代码

相关帖子