html - 从服务器颜色时如何应用渐变效果

Question

我做了一个按钮:

<div class="pl-menu">

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

</div>

这是 CSS:

.pl-menu {

color: #FFF;
text-transform: uppercase;
margin-top: 0px;
text-align: center;
font-size: 18px;
border: 1px solid #ffffff;
width:350px;
}

.pl-menu ul{

height:inherit;

}

 .pl-menu ul li {

list-style-type: none;
height: inherit;
text-align: center;
height: 45px;
border: 0.2px solid #ffffff;
}

这是 fiddle 链接:example

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

现在我想实现如下效果:

1) 使按钮看起来更坚固，如下所示:

2) 当用户点击按钮时，按钮看起来“淡出”

问题:

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

b) 我可以应用什么 CSS 技术来使它看起来“淡化”。 (我试过不透明度:0.8，但这不是我要找的)。

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

box-shadow:inset 适合我。

Answer 1

如果你想制作渐变，但颜色来自服务器，你可以使用嵌入阴影，半透明的白色逐渐消失::

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

}

在此fiddle我在背景色上设置了一个动画，只是为了表明光效与背景色无关