【html&css】CSS圆角框的实现方法

原理：定义四个透明的圆角（不用太大，只是起到填充背景的时候显示出圆角即可），圆角内部为透明，外部可以填充和最外边的DIV层相同的颜色。然后用CSS分别定位到DIV层的四个顶角上，最后填充前景色即可。

代码：

CSS:

<style type="text/css">
	#box-outer
	{
		background:#FF9900 url(Images/leftTOP.png) no-repeat top left;
		width:200px;
	}
	
	#box-inner
	{
		background:url(Images/rightTOP.png) no-repeat top right;
		padding-top:10px;
	}
	
	#box-inside
	{
		background:url(Images/leftBOTTOM.png) no-repeat bottom left;
	}
	
	.bottom
	{
		background:url(Images/rightBOTTOM.png) no-repeat bottom right;
		padding-bottom:10px;
	}
</style>

HTML：

<div id="box-outer">
	<div id="box-inner">
		<div id="box-inside">
			<div class="bottom">
            	<p>纯CSS圆角框<br />
            
            	纯CSS圆角框</p>
			</div>
        </div>
	</div>
</div>