<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>
把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。
<!DOCTYPE html><html>
<head>
<meta charset="GBK">
<title>test</title>
<style type="text/css">
*{
box-sizing: border-box
margin: 0
padding: 0
}
.container{
width: 90px
height: 90px
}
.item{
width: 30px
height: 30px
display: block
float: left
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<script type="text/javascript">
var items = document.querySelectorAll('.item')
Array.prototype.slice.call(items, 0).forEach(function(item){
item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)
})
</script>
