是否可以將漸變應用於箱形陰影？

我正嘗試用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

是否可以將漸變應用於箱形陰影？

回答

相關問題