製作8個圖片,分別對應左上,上,右上,左,右,左下,下和右下。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS</title>
<style type="text/css">
div#outer
{ background: url("images/top.gif") 0 0 repeat-x; }
div#outer div
{ background: url("images/bottom.gif") 0 100% repeat-x; }
div#outer div div
{ background: url("images/left.gif") 0 0 repeat-y; }
div#outer div div div
{ background: url("images/right.gif") 100% 0 repeat-y; }
div#outer div div div div
{ background: url("images/topleft.gif") 0 0 no-repeat; }
div#outer div div div div div
{ background: url("images/topright.gif") 100% 0 no-repeat; }
div#outer div div div div div div
{ background: url("images/bottomleft.gif") 0 100% no-repeat; }
div#outer div div div div div div div
{ background: url("images/bottomright.gif") 100% 100% no-repeat; }
div#outer, div#inner
{
width: 400px;
height: 300px;
}
div#inner
{
padding: 15px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner">
<span>Some content here.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>CSS</title>
<style type="text/css">
div#outer
{ background: url("images/top.gif") 0 0 repeat-x; }
div#outer div
{ background: url("images/bottom.gif") 0 100% repeat-x; }
div#outer div div
{ background: url("images/left.gif") 0 0 repeat-y; }
div#outer div div div
{ background: url("images/right.gif") 100% 0 repeat-y; }
div#outer div div div div
{ background: url("images/topleft.gif") 0 0 no-repeat; }
div#outer div div div div div
{ background: url("images/topright.gif") 100% 0 no-repeat; }
div#outer div div div div div div
{ background: url("images/bottomleft.gif") 0 100% no-repeat; }
div#outer div div div div div div div
{ background: url("images/bottomright.gif") 100% 100% no-repeat; }
div#outer, div#inner
{
width: 400px;
height: 300px;
}
div#inner
{
padding: 15px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div>
<div>
<div>
<div>
<div>
<div id="inner">
<span>Some content here.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>