精致的图片边框

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

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

QQ企鹅

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

代码如下：

<a href='#' title='空链接'><img src='imgs/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可算“绿色”了，而且效果也大方得体。

强烈推荐！