[CSS]repeat-background Image, without slice

將邊框圖自動延展,不須切割

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>