Можно ли применить градиент к box-shadow?

Я пытаюсь создать выцветшую тисненую тень коробки с css3. До сих пор у меня есть тисненая коробка-тень, благодаря этой учебник и этот.

объединяя эти два руководства, мне интересно, есть ли способ применить градиент на box-shadow?

здесь вы можете найти то, что я пытаюсь создать:

enter image description here

и вот в чем проблема: enter image description here

обратите внимание, что dark box-shadow должен увядать.

и найти коды здесь: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);

}

7
css css3 gradient

1 ответов

вот одно решение, которое использует один объект и два линейных градиента. Это, очевидно, не бокс-тени, но вы можете добавить бокс-тени к элементу, как показано в примере ниже.

downsite использования этого является то, что линейный градиент IE10+ и box-shadow можно использовать 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: теперь выглядит правильно в Firefox. Я забыл чтобы изменить rgba(0,0,0,0) to rgba(255,255,255,0), что, конечно, огромная разница. (здесь я нашел глаза)

4