순수 CSS_Image 특수 효과로 구현된 이미지 위로 마우스를 이동할 때 그림자 효과를 추가하는 코드

<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(http://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> <div id="profileAvatar"> <i><i><i><i> <a href="http://www.jb51.net"><img src="http://www.jb51.net/images/logo.gif" style="max-width:90%" id="image" onmouseover="show()" onmouseout="show()" alt="순수 CSS_Image 특수 효과로 구현된 이미지 위로 마우스를 이동할 때 그림자 효과를 추가하는 코드" ></a> </i></i></i></i> </div> 부드러운 그림자를 표시하려면 마우스를 위로 이동하세요. <input type="button" value="缩小图片" onclick="document.getElementById('image').width -=10;">
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]