Question

我知道这听起来很基本，但我对HTML有些新手。我想有一些看起来像渐变按钮的项目列表。我知道如何使用无序列表元素制作列表但是在样式方面有问题。

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

Answer 1

尝试将以下样式块插入头标记。

<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>

这是小提琴链接：http://jsfiddle.net/fL5tj/

Answer 2

试试这个

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

http://jsfiddle.net/XN4QE/

Answer 3

如果你提到渐变风格，就意味着给粗略的原型提出相同的想法

列出项目，如渐变按钮

3 个答案: