CSS图片边框效

2009-06-16　来源/作者：懒人图库　分类：图片特效　 «»

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.lanrentuku.com</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #666666; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "Trebuchet MS", Georgia, Verdana, serif
}

.photo .photo {
	FLOAT: left; MARGIN-BOTTOM: 12px; WIDTH: 185px
}
.photo A {
	DISPLAY: block; FONT-SIZE: 0.85em; BACKGROUND: url(http://www.lanrentuku.com/down/js/images/12451161910.png) #fff no-repeat 0px 0px; COLOR: #002c79; TEXT-DECORATION: none
}
.photo A:visited {
	BACKGROUND-POSITION: -371px 0px; COLOR: #7e7e7e
}
.photo A:hover {
	BACKGROUND-POSITION: -185px 0px; COLOR: #c24f00
}
.photo SPAN.desc {
	DISPLAY: block; TEXT-ALIGN: center
}
.photo IMG {
	DISPLAY: inline; MARGIN: 11px 11px 8px; WIDTH: 163px; HEIGHT: 105px
}
.photo {
	TEXT-ALIGN: center
}
.photo .photos-3 {
	MARGIN: auto; WIDTH: 555px
}
</STYLE>

<p align="center">查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
<SCRIPT language=Javascript src="" type=text/javascript></SCRIPT>
</P></CENTER></BODY></HTML>

运行代码保存代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

通过CSS进行定义的图片框架，主要是结合Image Replacement，定位平移的方法。当鼠标经过时边框的背景图片通过平移而产生效果。

用到的图片：

标签：图片特效