Czy możliwe jest zastosowanie gradientu w oknie-cieniu?

Question

Próbuję utworzyć wyblakłe wytłoczony box-shadow z css3. Do tej pory mam wytłoczony box-shadow, dzięki tutorialowi this i .

Łącząc te dwie linie pomocnicze, zastanawiam się, czy istnieje sposób na zastosowanie gradientu w cieniu ramki?

Tu możesz znaleźć to, co staram się tworzyć:

i tutaj jest problem:

Należy pamiętać, że ciemne box-shadow powinny zanikać.

I znaleźć kody tutaj: 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

Oto jedno rozwiązanie, które wykorzystuje jeden obiekt i dwa gradienty liniowe. Oczywiście nie są to cienie, ale możesz dodać cienie do elementu, jak na poniższym przykładzie.

downsite korzystania z tego jest, że linear gradient are IE10+ i 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; 
} 

Aktualizacja: Teraz wygląda poprawnie w Firefoksie. Zapomniałem zmienić rgba(0,0,0,0) na rgba(255,255,255,0), co jest ogromną różnicą oczywiście. (here i found the eye opener)