其实他这种效果是两张图片叠加的效果，前面我们看到的主图片是在(X)HTML里调过来的，而图片周围流水效果是其background-image(是动画GIF)，而背景图片显示的范围只有我们留出的padding空隙那么大，他只能显示那部分。效果看起来像流动的线条。

这里还是借用一下俄罗斯美女Janaina，请先看效果。图片1.始终让其显示流水效果，图片2.只有在OnMouse的时候显示，也就是hover。

（点击可以看大图，是Highslide图片特效）

想要达到这种效果必须要用这图片bg_current.gif —-> ：

(X)HTML下调用
   <img src="xxx.jpg" alt="" />
CSS下调用
img {
    background-image: url(bg_current.gif);
    padding: 1px;
}
OnMouse
.pict a img {
    padding: 1px;
}
.pict a:hover img {
    background-image: url(bg_current.gif);
    padding: 1px;
}

这里最重要的就是padding:1px; 我们留出这空隙就是为了在此范围内显示背景图片，其他是不可见的。当然你也可以加 border:2px solid #ccc; 等，上图我是加了的。

值得注意的是：这效果在WIN IE6下是显示不出效果的，因为IE6不支持padding属性。
但是我们可以利用图片亲元素<p>或<div>来细化CSS的方法来达到图片1.的显示效果。
像下面这样写代码，它就会兼容IE6。

.pict {
    background-image: url(bg_current.gif);
    padding: 1px;
    display: inline;
    _width: 100px; /*For WIN IE6*/
}
.pict{
    display:table;
}
.pict img {
    vertical-align: bottom;
}

遗憾的是图片2.的显示效果（也就是OnMouse时）在IE6下是无论如何达不到的。
在IE7，Opera，Safari，Firefox，Chrome下好用，因为都支持padding属性。
愿WIN IE7早点普及，之前只能辛勤细化CSS啦。

至于Highslide图片特效和图片流水效果结合（即同时调用）很简单，调用Highslide的JS库（class=”highslide”），又调用上面给出的CSS（class=”pict”）而CSS在后台调用背景图片（动画GIF），当然(X)HTML是少不了的，他调用前面的主图片，包括highslide点击以后的大图片。（应要求具体写之）

<div class="pict"><a class="highslide" onclick="return hs.expand(this)"
href="photo.jpg">
<img src="photothumb.jpg" alt="" /></a></div>