第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。

实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签。

圆角背景高度自适应：

<style type="text/css">

body,div,p,h2{ margin:0; padding:0;}

div{width:262px; margin:100px auto 0; background:url(images/hua1.png) right bottom no-repeat; overflow:hidden;}

h2{ width:262px; height:36px; text-indent:35px; background:url(images/hua1.png) left top no-repeat;}

div p{ padding:10px;}

</style>

<div>

<h2>标题</h2>

<p>内容内容内容内容内容内容内容内容内容内容内容内容

内容内容内容内容内容内容内容内容内容内容内容内容

</p>

</div>

宽度自适应的圆角按钮原来是一样的，只不过是改成横向的：

<style type="text/css">

body,ul,li{ margin:0; padding:0;}

ul{ list-style:none; overflow:hidden;}

li{ float:left; display:inline; height:30px; margin-left:10px; background:url(images/hua2.png) right top no-repeat;}

li span{ float:left; display:block; height:30px; padding:0 10px; line-height:30px; text-align:center; background:url(images/hua2.png) left bottom no-repeat;}

</style>

<ul>

<li><span>三个字</span></li>

<li><span>六个字六个字</span></li>

</ul>