救命啊~~！菜鸟求助css的相关问题

这是《精通css》里的内容——灵活的圆角框，我弄了很久都弄不懂，一个圆角背景图片扩大的时候，其他的也扩大了，重合覆盖不了!?

<div class="box">
          <div class="box-outer">
          <div class="box-inner">
            <h2>headline</h2>
            <p>Content</p>
          </div>
          </div>
        </div>

.box {
    width: 20em;
    background: url(images/leftbottom.gif) no-repeat
    left bottom;
}
.box-outer {
    background: url(images/rightbottom.gif) no-repeat
    right bottom;
    padding-bottom:5%;
}
.box-inner {
    background: url(images/lefttop.gif) no-repeat left top;
}

.box h2 {
    background: url(images/righttop.gif) no-repeat right top padding-top:5%;
}

.box h2,.box p{
    padding-left:5%;
    padding-right:5%;
}