是否可以将渐变应用于盒阴影？

Question

我正在尝试用css3创建褪色浮雕盒子阴影。直到现在，由于this教程和this one，我有一个浮雕框阴影。

结合这两个指南，我想知道有没有办法在盒子阴影上应用渐变？

您可以在这里找到我想要创建的内容：

这是问题所在：

请注意，暗盒阴影会褪色。

在此处查找代码：http://jsfiddle.net/xkc8Lvs1/

.nav-tabs:after {
content:"";
height: 2px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.0) 100%);
display: block;
margin: 10px 0;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.0);

}

Answer 1

这是一种使用一个对象和两个线性渐变的解决方案。这些显然不是盒子阴影，但您可以为元素添加盒子阴影，如下例所示。

使用它的缩减是，linear gradient are IE10+和box-shadow can be used IE9+

Js Fiddle演示：http://jsfiddle.net/urwjb06x/1/

 .separator {
     height: 2px;
     border:none;
     background-color: transparent;
     background-image: 
        linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)),
        linear-gradient(90deg, rgba(255,255, 255,0), rgba(255, 255, 255, 1), rgba(255,255,255,0));

    box-shadow: rgba(255,255,255,0.8) 0 0 20px;

     background-repeat: no-repeat;
     background-position: 0 0, 0 1px;
     background-size: 100% 1px;
 }

更新：现在在Firefox中看起来正确。我忘记将rgba(0,0,0,0)更改为rgba(255,255,255,0)，这当然是一个巨大的差异。 （here i found the eye opener）