將邊框圖自動延展,不須切割
Css Code
<style type="text/css">
ul.ulbox{
margin:0;
padding:0;
width: 300px;
list-style-type: none;
margin: 10px auto;
}
ul.ulbox li{display:block; clear:both;margin:0;padding:0;}
ul.ulbox li.liTop{/* 上左 */
background: url("bg.gif") top left no-repeat white;
}
ul.ulbox li.liTop div{/* 上右 */
display:block;
background: url("bg.gif") top right no-repeat white;
margin-left:3px;
padding:10px; /*無邊界,pading:3px 3px 0 0 ;*/
}
ul.ulbox li.liBottm{/* 下左 */
height:3px;
font-size:0px;
line-height:0;
background: url("bg.gif") bottom left no-repeat white;
}
ul.ulbox li.liBottm b{/* 下右 */
display:block;
background: url("bg.gif") bottom right no-repeat white;
margin-left:3px;
}</style>
HTML Code
<ul class="ulbox">
<li class="liTop">
<div>內容區塊。</div>
</li>
<li class="liBottm"><b></b></li>
</ul>