CSS弹性布局技巧-优快云博客

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
<!--
.box{
	width:20em;
	background:#ffffff url(http://ice-cream.iteye.com/upload/picture/pic/8113/5db63aa3-4742-3124-9347-5b24be3ac140.gif) no-repeat left bottom;
	color:#666666;
}

.box_outer{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8116/3b8d86cf-5f51-32ac-843a-add5e7330db0.gif) no-repeat right bottom;
	padding-bottom:5%;
}

.box_inner{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8118/1cdc0448-19de-3b09-9484-8663b57d9336.gif) no-repeat left top;
}

h2{
	background:url(http://ice-cream.iteye.com/upload/picture/pic/8120/b18eedeb-18bf-37b3-bd77-48895ac79037.gif) no-repeat right top;
	padding-top:5%;
}

h2,p{
	padding-left: 5%;
	padding-right:5%;
}
-->
</style>
</HEAD>

<BODY style="font-size:12px;">
	<div class="box">
		<div class="box_outer">
			<div class="box_inner">
				<h2>Lorem lpsum</h2>
				<p>Lorem ipsum dolor sit amet,consecteuer adlipiscing elit.Proin venenatis turpis ut quam.In dolor.Nam ultrixes nis!sollicitudin sapien.Ut lacinia aliquet ante.</p>
			</div>
		</div>
	</div>
</BODY>
</HTML>

你可以随意改动<BODY style="font-size:12px;">中font-size的大小，这时你会发现圆角框会因文本尺寸进行伸缩，很灵活，很强大！