Ist es möglich, Gradienten auf Box-Shadow anzuwenden?

Question

Ich versuche verblasst geprägte Box-Schatten mit CSS3 zu erstellen. Bis jetzt habe ich einen geprägten Box-Schatten, dank this Tutorial und this one.

Wenn ich diese beiden Anleitungen kombiniere, frage ich mich, ob es irgendeinen Weg gibt, Gradienten auf Box-Shadow anzuwenden?

Hier können Sie feststellen, was ich versuche zu erstellen:

und hier ist das Problem:

Hinweis, dass dunkle box-shadow verblassen sollte.

und Codes finden Sie hier: 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

Hier ist eine Lösung, die ein Objekt und zwei linearen Gradienten verwendet. Diese sind natürlich keine Box-Schatten, aber Sie können dem Element Box-Shadows hinzufügen, wie im folgenden Beispiel gezeigt.

Die downsite diese zu verwenden, ist, dass die linear gradient are IE10+ und box-shadow can be used IE9+

Js Fiddle Demo: 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; 
} 

Update: Jetzt richtig in Firefox aussieht. Ich habe vergessen, die rgba(0,0,0,0) zu rgba(255,255,255,0) zu ändern, was natürlich ein großer Unterschied ist. (here i found the eye opener)