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

我正尝试用css3创建褪色的浮雕盒子阴影。到现在为止，我有一个浮雕的盒子阴影，感谢this教程和this one。是否可以将渐变应用于箱形阴影？

结合这两个指南，我想知道是否有任何方法来应用渐变盒阴影？

在这里你会发现什么，我试图创建：

enter image description here

这里的问题是： enter image description here

注意，暗箱阴影应该褪色。

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

}

来源

2014-11-02 Reza Owliaei

@HashemQolami我只是更新了问题 – 2014-11-02 12:26:52

哦..我明白了。我撤回了我的评论。但是，如果有任何问题，最好发布当前代码。 – 2014-11-02 12:29:14

这里是一个解决方案，是使用一个对象和两个线性梯度。这些显然不是方块阴影，但是您可以为元素添加阴影框，如下面的示例所示。

使用此的downsite是，该linear gradient are IE10+和box-shadow can be used IE9+

的js小提琴演示：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）

来源

2014-11-02 12:58:45

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

回答

相关问题