精致的图片边框       原文由CSS Groups所有

请大家将鼠标移动到下面的图片上，怎么样，这种边框的变化效果很cool吧！

如何实现的呢？其实很简单，借助我们的老朋友——CSS！
嘿嘿，一般人我不告诉他^_^

首先看图片部分的代码，很简单，就是一个普通的带有链接的图片，它的原貌是：

代码如下：

<a href="#" ><img src="images/QQ.gif" alt="QQ企鹅" /></a>

关键是放在head中的CSS部分：

<style type="text/css">
<!--

/*为图片指定一个1象素宽的灰色实线边框，同时设置5px的留白，这样就形成了图片的边框。*/
img { border: 1px solid #ccc; padding: 5px;}

/*以下两句是大家都用过的，即为超链接设置样式,颜色随便。*/
a { color: #000; text-decoration: none;}
a:hover { color: #f60;}

/*关键的一句！！告诉浏览器，当鼠标悬停在链接上时，链接内的图片边框改变颜色为黑色。*/
a:hover img { border-color: #000;}

-->
</style>

至此，一个漂亮、精致的图片鼠标悬停效果就完成了，比起复杂罗嗦的js特效来说，这样简洁的CSS可算“绿色”了，而且效果也很大方得体。

强烈推荐！