Javascript JS：循环特定类的div并基于父div属性修改子div？

好的，我在我的页面上都有这些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的标题在这里

我想要的是这个

<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必须写每次我想做一个div。然后，我希望JS自动插入所有需要的内部div（左上角，等等）

我该怎么做呢

---

或者，实现相同效果的另一种方法是什么（具有圆角边和渐变的div，并且完全可以调整大小）？

这也会有所帮助-在我看来更是如此：

没错。使用css3并修复不支持它的浏览器更好。>>添加到书签