精通CSS第四章灵活的圆角框&border-radius

一.灵活的圆角框

HTML：

<div class="box">
		<div class="boxOuter">
			<div class="boxInner">
				<h2>yyc change the world</h2>
				<p class="last">
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
				</p>
			</div>
		</div>
</div>

CSS:

/*灵活的圆角框：应用两个互相重叠的图像来组成顶部或底部曲线*/
.box{
	width: 20em;
	background: url(../images/bottom-left.gif) no-repeat left bottom;

}
.box .boxOuter{
	background: url(../images/bottom-right.gif) no-repeat right bottom;
	padding-bottom: 1px;
}
.box .boxInner{
	background: url(../images/top-left.gif)  no-repeat top left;
}
.box h2{
	background: url(../images/top-right.gif) no-repeat top right; 
}
.box h2,.box p{
	padding:0 1em 0 1em;
	line-height: 1.5em;
}

Result:

二.border-radius

HTML:

<div class="yyc">
		<h2>yyc</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.
		</p>
</div>

CSS:

.yyc{
	border-radius: 1em;
	width:20em;
	border:1px solid #eee;
	background: #eee;
	padding: 0 1em 0 1em;
}

Result: