简单实用的图片边框效果

图片的边框可以随鼠标动作（hover）改变样式，而且边框跟图片需要有一定距离——很简单的效果，却被一个莫名其妙的问题困扰了好几天，经典论坛上的hutia朋友给出的解决方法是加上padding:6px;俺后来查看cssvault.com的CSS发现将图片“浮动（float）”起来也可以避免这个问题。

查看示例

XHTML：

<a class="imgborder" href="#">
<img src="smalltransport.png" alt="smalltransport" width="200" height="150" />
</a>

CSS：

img { border:0; }
.imgborder, a.imgborder { 
 float: right; 
 border: 5px solid #F1F1F1; 
 background: #FFF; 
 padding: 4px; 
 margin:0px;
} 
a.imgborder:hover {border: 5px solid #7ABBEB;}