简单的双色渐变效果没有图像?

我想创建一个简单的视觉效果,以便在iPhone/Android/etc上显示数据行,如中所示。 this example .

这个效果非常简单;它是两个相互重叠的矩形,顶部比底部轻,顶部有一个更轻的边框。这样做:

<style>
.rowtop { background-color: #333; border-top: 1px solid #ccc; height: 25px; }
.rowbottom { background-color: #000; height: 25px; }
</style>

<div class="row">
 <div class="rowtop">&nbsp;</div>
 <div class="rowbottom">&nbsp;</div>
</div>

现在,我希望能够将文本和标签放在上面,如中所示。 the example . 这就是我需要帮助的地方。

我想将文本相对于“row”放置,但是row实际上是由两个div组成的,所以很复杂。文本必须位于“rowtop”和“rowbottom”分隔符的顶部。

我试着为标签设置第三个DIV,并设置它的z索引,但不能让它做我想做的。

我想我可以使用背景图像而不是RowTop和RowBottom,这让我自己很容易,但我想知道是否有人有一个聪明的非基于图像的解决方案。

[更新]根据Edeverett的回答,我尝试了CSS渐变,效果很好:

background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0)));