<div class="htmlarea"> <textarea id="runcode42931"> <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;"> </textarea> <br><input onclick="runEx('runcode42931')" type="button" value="运行代码"><input onclick="doCopy('runcode42931')" type="button" value="复制代码"> <input onclick="doSave(runcode42931)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A すべて選択 注: </a>外部 Js を導入する必要がある場合は、</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>