css褪色邊框

我正在嘗試創建一個帶有褪色邊框的框。我已經設法找到這樣的例子，但我無法創造我希望完成的事情。css褪色邊框

border:3px; 
-webkit-border-image:-webkit-gradient(linear, 0 0, 0 100%, from(#382E5C), to(rgba(0, 0, 0, 0))) 1 100%; 
-webkit-border-image:-webkit-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%; 
-o-border-image:-o-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%; 
-moz-border-image:-moz-linear-gradient(#382E5C, rgba(0, 0, 0, 0)) 1 100%;

該css給我涼爽的兩邊淡化邊界，但我也希望頂部邊框保持純色。如何讓頂部邊框變牢固，並保持底部褪色，透明。謝謝

來源

2012-10-04 Philippe Allaire

邊境形象影響到整個元素。一個建議是將元素放在另一個div中，並設置border-top：1px solid＃000。 –

請試試這個：如果我們使用border-top，邊框將只保留在最上面的位置。

border-top: 3px solid red; 
/*** 
------add your fading borders 
***/

，如果你不明白的請給我你的代碼...

來源

2012-10-04 06:27:57

我使用border-top屬性創建另一個div，必須添加margin-top：-3px;讓一切正確排列。 –

好菲利普.... –

回答

相關問題