您的位置: 首页 > IT文章 > 网页特效 > 纯CSS实现的当鼠标移上图片添加阴影效果代码 纯CSS实现的当鼠标移上图片添加阴影效果代码 分类: IT文章 • 2022-05-11 23:54:05 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <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(//img.jbzj.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> <div id="profileAvatar"> <i><i><i><i> <a><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly93d3cuamI1MS5uZXQvaW1hZ2VzL2xvZ28uZ2lm" id="image" onmouseover="show()" onmouseout="show()" alt="纯CSS实现的当鼠标移上图片添加阴影效果代码" title="纯CSS实现的当鼠标移上图片添加阴影效果代码"></a> </i></i></i></i> </div> 鼠标移上去显示圆滑的阴影 <input type="button" value="缩小图片" onclick="document.getElementById('image').width -=10;">[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
