底部漸變邊框

Question

根據CSS Tricks，以下CSS語法會導致左邊框漸變。

.left-to-right { 
border-width:3px 0 3px 3px; 
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
-o-border-image: 
     -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
-moz-border-image: 
     -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%; 
} 

我想要在元素的底部獲取邊框漸變。

我試圖改變這個

border-width:3px 0 3px 3px; 

這個

border-width:0 0 3px 0; 

這

border-width:0 3px 3px 3px; 

而且這是行不通的，任何人可以幫助我得到的是下邊框的工作？

您可能需要使用WebKit瀏覽器來執行此操作。

這裏將是一個人的工作與小提琴; http://jsfiddle.net/HsTcf/

謝謝。

Answer 1

border-width: 0 0 3px 0; 

是正確的。

然而，改需要以下被製備：

... -gradient(right, ... 

需要被改變以

... -gradient(top, ... 

和1 100%;到100% 1;。

演示：jsfiddle.net/HsTcf/3

Answer 2

這裏是一個爲底邊框的作品的另一種方式。這是來自站點示例的完整類聲明。

#header_bg { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 121px; 
 
    top: 0px; 
 
    background-color: #fff; 
 
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.1) !important; 
 
    z-index: 10; 
 
}

<div id="header_bg"></div>

我假設你上面正試圖使固定頭。當然最重要的部分是盒子陰影屬性。這也適用於大多數現代瀏覽器。