这段代码适合给CSS新手朋友看,有助于理解CSS中border属性的应用,这种实现效果实际上是给内层的IMG标签设置border属性,然后在外层包围的A标签同样设置一个border边框属性,将其宽度设置宽一点,比较简单的效果。
示例代码如下:
<!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>图片边框</title>
<style type=”text/css”>
a{border:solid 3px #999;display:inline-block;padding:2px;}
img{border:solid 1px #aaa;display:block;padding:5px;}
</style>
</head>
<body>
<a href=”/”><img src=”http://www.codefans.net/jscss/demoimg/wall_s7.jpg” /></a>
</body>
</html>