图片边框变换CSS Hover状态效果一例

　<style type="text/css"> <!-- h1 {text-align:center;margin-top:50px;} p#outer { margin:0 auto; width:202px; } #outer a { margin:0px; display:block; position: relative; border:1px solid #008800; } #outer a:hover {border:1px dashed #ff6600;} #outer img {display:block;border:none;background:#008800;} --> </style> 将鼠标移至图片，将看到此效果。 <p id="outer"><a href="http://www.cnwebshow.com/"><img src="http://www.makewing.com/lanren/jscode/js-0012/images/02.jpg" alt="看到效果了吗？" /></a></p>
         我们可能会经常用到此效果，在传统的做法中，这一效果的实现是比较困难或繁琐的，现在通过CSS实现鼠标移至图片，边框发生变换的效果，是非常容易的。