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

Question

我正在尝试用css3创建褪色浮雕盒子阴影.直到现在,由于本教程和本教程,我有一个浮雕盒子阴影.

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

在这里,您可以找到我正在尝试创建的内容:

这是问题所在:

请注意,暗盒阴影应该会消失.

并在此处查找代码: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

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

使用这个的缺点是，线性渐变是IE10+，box-shadow可以使用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)，这当然是一个巨大的差异。（在这里我发现了大开眼界）