Kutu gölgesine degrade uygulamak mümkün mü?

Question

Ben css3 ile soluk kabartmalı kutu gölge oluşturmaya çalışıyorum. Şimdiye kadar, this eğitimi ve this one sayesinde, kabartmalı bir kutu gölgem var.

Bu iki kılavuzu birleştirerek, kutu gölgesinde degrade uygulamanın herhangi bir yolu var mı?

ve burada sorun şu::

Burada ben oluşturmaya çalışıyorum şeyi bulacaksınız karanlık kutu gölge solmaya gerektiğini

Not.

Ve burada kodlarını bulmak: 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

İşte bir nesne ve iki doğrusal basamaklara kullanan bir çözümdür. Bunlar açıkça kutu gölgeleri değil, ancak aşağıdaki örnekte görüldüğü gibi öğeye kutu gölgeleri ekleyebilirsiniz. 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; 
} 

Güncelleme:: Artık Firefox'ta doğru görünüyor

bu kullanmanın Downsite linear gradient are IE10+ ve box-shadow can be used IE9+

Js Fiddle Demo olmasıdır. rgba(0,0,0,0)'u rgba(255,255,255,0) olarak değiştirmeyi unuttum, ki bu büyük bir fark. (here i found the eye opener)