如何使用css添加垂直渐变？

Question

我有垂直子菜单,如下:

<div id="dropdown_menu" class="menu">
<ul>
<li> <a>First Link</a></li>
<li> <a>Second Link</a></li>
</ul>
</div>

我在css类'menu'中放置底部背景.在.menu ul中的顶部背景片段.现在,我有一个垂直渐变,从上到下改变颜色(在整个垂直菜单中),因此我不能把它放在.menu ul li中.是否可以添加垂直渐变而不对html进行任何更改？

Answer 1

#dropdown_menu {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF280C00', endColorstr='#004A1D00'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#280C00), to(rgba(75, 30, 0, 0))); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #280C00,  rgba(75, 30, 0, 0)); /* for firefox 3.6+ */
}

请参见此处的实际实现:http://www.salonbelledesoir.com(边缘周围的渐变是CSS渐变.)

这在Opera中不起作用(尽管可能有-o-gradient一些我不知道的属性.

或者,您可以使用常规背景图像,相应地重复.