css - CSS褪色边框

Question

我正在尝试创建一个带有褪色边框的盒子。我设法找到了这样的例子，但我无法创建我希望完成的事情。

    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给了我两边很酷的褪色边框，但我也希望顶部边框保持纯色。如何使顶部边框实心，并保持侧面褪色，底部透明。谢谢你

Answer 1

请试试这个：如果我们使用border-top，边框将只停留在顶部。

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

如果你不明白，请给我你的代码...