Html 如何应用渐变效果时，颜色从服务器

我做了一个按钮：

<div class="pl-menu">

    <ul id="save-button"><li style="background-color:black" onClick="">SAVE</li></ul>

</div>

这里是fiddle链接：

出于某种原因，我不得不使用这个HTMLUL和li代码来制作这个按钮

现在我想实现以下效果：

1） 使按钮看起来更坚固，如下所示：

2） 当用户单击按钮时，按钮看起来“淡入淡出”

问题:

a） 我想知道，我可以应用什么CSS技术使按钮看起来更像图1

b） 我可以应用什么CSS技术使它看起来“褪色”。（我尝试了不透明度：0.8，但它不是我想要的）

=======更新=============

---

盒子阴影：插图适合我。

我做了一些事情，使你的按钮看起来像照片中的按钮

使按钮具有

填充

而不是

高度

，以垂直和水平居中文本

我使用了一个渐变生成的背景

使整个菜单的背景为黑色

使用

：active

伪元素，只能在单击对象时分配CSS

当元素处于活动状态时，我将

不透明度设置为
0.4

.pl-menu ul li {

    list-style-type: none;
    height: inherit;
    text-align: center;
    height: auto;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    background: #2b2d30; /* Old browsers */
    background: -moz-linear-gradient(top,  #2b2d30 0%, #45484d 28%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2d30), color-stop(28%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2b2d30 0%,#45484d 28%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2d30', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

.pl-menu ul li:active {

    opacity: 0.4;
}

瞧
 我做了一些事情，让你的按钮看起来像照片中的按钮

使按钮具有
填充
而不是
高度
，以垂直和水平居中文本
我使用了一个渐变生成的背景
使整个菜单的背景为黑色
使用
：active
伪元素，只能在单击对象时分配CSS
当元素处于活动状态时，我将
不透明度设置为
0.4

.pl-menu ul li {

    list-style-type: none;
    height: inherit;
    text-align: center;
    height: auto;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    background: #2b2d30; /* Old browsers */
    background: -moz-linear-gradient(top,  #2b2d30 0%, #45484d 28%, #000000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b2d30), color-stop(28%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2b2d30 0%,#45484d 28%,#000000 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2b2d30 0%,#45484d 28%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2d30', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

.pl-menu ul li:active {

    opacity: 0.4;
}

瞧
 问题：

a）我想知道，我可以应用什么CSS技术使按钮看起来更像图1

大部分是
线条高度
，还有一些颜色样式。你需要一个网页字体来打印这么薄的字体

b）我可以应用什么CSS技术使它看起来“褪色”。（我尝试了不透明度：0.8，但它不是我想要的）

有一些CSS3技术可以做到这一点。简单的旧颜色变化也可以做到这一点

这是一个-我用

编辑：这与@David的答案非常相似，比我的答案快两分钟。一个不同之处是，我的方法使用JS在单击的LI上设置一个类，假设您希望该可视状态向用户指示“正在进行保存”。如果您不需要它，只想在用户单击时获得效果，
：active
使用更少的代码
 问题：

a）我想知道，我可以应用什么CSS技术使按钮看起来更像图1

大部分是
线条高度
，还有一些颜色样式。你需要一个网页字体来打印这么薄的字体

b）我可以应用什么CSS技术使它看起来“褪色”。（我尝试了不透明度：0.8，但它不是我想要的）

有一些CSS3技术可以做到这一点。简单的旧颜色变化也可以做到这一点

这是一个-我用

编辑：这与@David的答案非常相似，比我的答案快两分钟。一个不同之处是，我的方法使用JS在单击的LI上设置一个类，假设您希望该可视状态向用户指示“正在进行保存”。如果您不需要它，只想在用户单击时获得效果，
：active
使用更少的代码
 如果您想制作渐变，但颜色来自服务器，您可以使用嵌入阴影，半透明白色逐渐消失：

.pl-menu ul li {

    list-style-type: none;
    text-align: center;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    box-shadow: inset 0px 15px 25px rgba(255,255,255, 0.5);
    -webkit-animation: colors 4s infinite;
    animation: colors 4s infinite;

}

在本例中，我在背景色上设置了一个动画，只是为了显示灯光效果独立于背景色
如果您想制作渐变，但颜色来自服务器，您可以使用插入阴影，半透明白色逐渐消失：

.pl-menu ul li {

    list-style-type: none;
    text-align: center;
    border: 1px solid #ffffff;

    height: auto;
    width: 100%;
    padding: 10px 0px;

    box-shadow: inset 0px 15px 25px rgba(255,255,255, 0.5);
    -webkit-animation: colors 4s infinite;
    animation: colors 4s infinite;

}

在本文中，我在背景色上设置了一个动画，只是为了显示灯光效果独立于背景色
ha！几分钟内，包括colorzilla gradient maker！：）你们俩都很摇滚。。。谢谢你…我从中学到了很多。哈！几分钟内，包括colorzilla gradient maker！：）你们俩都很摇滚。。。谢谢你…我从中学到了很多。嗨，威尔，非常感谢你…我还有一个问题，是否可以只知道给定的颜色就制作渐变？黑色背景是从服务器动态检索的，所以我想知道，如果颜色是动态检索的（只有一种颜色），我能做什么@robert vals解释了我将如何做，非常感谢……我还有一个问题，是否可以只知道给定的颜色来制作渐变？黑色背景是从服务器上动态检索的，所以我想知道，如果颜色是动态检索的（只有一种颜色），我该怎么办@robert vals解释了下面的方法