好吧，所以我的页面上都有这些div，它们有圆边和垂直和水平渐变（它们沿边缘较浅，中间变暗）。我的设计师最初有这些div是固定的宽度和高度，只有一个大背景图像，但我需要宽度和高度灵活，所以我将背景图像切割成9个较小的图像，每个角落一个（50x50px），两个用于顶部和底部边缘（50px高，1px宽），两个用于左右边缘（1px高，50px宽），一个用于中心（1x1px）。
现在我的每个div的代码都是这样的：
<div class="roundedbox" id="rb1"
style="width: 859px; padding-top:10px; margin-left:34px;">
<div class="topleft"></div>
<div class="topmid" style="width:759px;"></div>
<div class="topright"></div>
<div class="midleft" style="height: 61px;"></div>
<div class="midmid" style="height: 61px; width:759px"></div>
<div class="midright" style="height: 61px;"></div>
<div class="botleft"></div>
<div class="botmid" style="width:759px;"></div>
<div class="botright">
<h2 style="margin-top:-104px; margin-left:-789px">Div's Title Goes Here</h2>
</div>
</div>
我想要的是这个
<div class="roundedbox" id="rb1"
style="width: 859px; height:161px; padding-top:10px; margin-left:34px;">
<h2>Div's Title Goes Here</h2>
</div>
我希望拥有这种简单的div结构，每次我想制作div时都不需要编写额外的HTML。然后，我希望JS自动插入所有需要的内部div（topleft等）。
我该怎么做？
或者，实现相同效果的另一种方法是什么（具有圆角和渐变的div，并且完全可调整大小）？