<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
* { padding:0margin:0}
dl { width:153pxborder-top:1px solid #dddborder-left:1px solid #ddd}
dl dd { list-style:nonewidth:50pxheight:50pxfloat:leftborder-right:1px solid #dddborder-bottom:1px solid #dddfloat:left}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<dl>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
</body>
</html>
把一张用来做边框的图片横砍两刀,竖砍两刀,就变成一个由九个小图片组成的九宫格,其中四个角的四张图片就是边框的四个角,四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容,不属于边框,所以这张图片是用不到的,因此这个九宫格实际被利用到的就是四周的八张图片。