Html 类似渐变按钮的列表项

我知道这听起来很基本，但我对HTML有点生疏。我想有一个项目，看起来像梯度按钮列表。我知道如何用无序的列表元素创建列表，但在样式方面有困难

<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
</ul>

清单项目#1
清单项目#2
清单项目#3

如果你提到渐变风格，就意味着给出一个大致的原型，在同一个主题上提出想法

尝试在你的头标签中插入以下风格块

<style>
.the-list {
    padding:0;
}
.the-list li {
    list-style:none;
    margin-top:8px;
    border:1px solid #000;
    border-radius:5px;
    padding:5px;
    box-shadow:1px 1px 2px rgba(0,0,0,.4);
    background: linear-gradient(white, #eee);
}
</style>

.名单{
填充：0；
}
.李先生{
列表样式：无；
边缘顶部：8px；
边框：1px实心#000；
边界半径：5px；
填充物：5px；
盒影：1px 1px 2px rgba（0,0,0,4）；
背景：线性梯度（白色，#eee）；
}

这是小提琴链接：

试试这个

li {
 background: linear-gradient(to top, #F0FAF8, #306AA8);
 border-radius: 5px;
 list-style: none;
 width: 100px;
 padding-left:28px;
 margin:2px 0 0 0;
}

---

你所说的“渐变按钮”是什么意思？请阅读该网站的常见问题解答。Ayhan，我试过你的代码了。它给了我一个非常相似的外观，我试图有它像。我想我只需要修改一下颜色。这很有效，伙计，谢谢！很高兴看到它有所帮助。祝您愉快：）