简单的两种颜色渐变效果没有图像？

我想创建一个简单的视觉效果来显示iPhone/Android /等数据行，如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看到。这是我需要帮助的地方。

我想放置文本相对于“行”，但行实际上是由两个div组成，所以它很复杂。文本必须位于“rowtop”和“rowbottom”div之上。

我试着弄乱了第三个div的标签并设置了它的z-index，但无法让它做我想做的。

我想我可以使用一个背景图像而不是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)));

来源

2010-11-16 Parand

如果你只是针对手机浏览器，你应该可以使用CSS梯度来获得这种效果，而不是背景图像的。

作为一个方面说明，我认为你不应该通过添加额外的div来产生这种效果。如果您（或您的用户）决定在将来以不同方式呈现它，则应该尽量保持内容和演示文稿的分离。因此，如果CSS渐变不适合你，我建议使用背景图像方法（如果你想做一些有趣的事情，并且减少HTTP请求，可以使用数据URI）。

来源

2010-11-16 08:22:37 edeverett

有关css渐变和不使用div的好处。我假设css3渐变不会为此工作，但他们这样做。谢谢。 – Parand 2010-11-16 08:32:51

简单的两种颜色渐变效果没有图像？

回答

相关问题