宽度可变圆角矩形

灵活的圆角框也即圆角矩形的宽度可以根据文本字号进行延伸变化。总体来说注意一下几点设置：
1）首先，设置最外层（box）背景；最外层背景需要设置左下角的圆角bottom-left，也即使用一个高度足够大的背景（或者设置背景色与背景融合）
2）其次此处应该加上一个outter层，outter层的实现右下角的圆角（bottom-right）。
3）注意最外层（box）设置宽度使用em或者百分比，这是宽度才是可变的；但是注意，宽度超过bottom-left时，页面显示“断截”
4）最内层元素（inner）设置背景的左上圆角
5）最内层元素包含的呈现在页面最上侧的元素（例如例子中的h2）设置背景的右上
举例如下：

HTML代码片段：

<div class = "box"><h2>Lorem Ipsum</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.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.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:

.box{width: 50%;background:url(../images04/bottom-left.gif)  repeat-y left bottom;}.box-outer{background:url(../images04/bottom-right.gif) no-repeat right bottom;padding-bottom: 20px;}.box-inner{background:url(../images04/top-left.gif) no-repeat left top;}.box-inner h2{background:url(../images04/top-right.gif) no-repeat right top;padding-top:20px;}.box-inner h2,.box-inner p{padding-left: 20px;padding-right:20px;}