-webkit-border-image可能存在线性渐变？

Question

有没有一种方法，我可以得到第二个例子中的造型从倒：

http://css-tricks.com/examples/hrs/

这有CSS：

/* Gradient transparent - color - transparent */ 

hr.style-two { 
    border: 0; 
    height: 1px; 
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
} 

一个div或p元素呢？或者真的有任何可以容纳内容的元素？我尝试了一堆-webkit-border-image和上面的代码，但无法做任何工作。

感谢， 贾斯汀

Answer 1

所以我重组后围绕在这个网站的例子：http://css-tricks.com/examples/GradientBorder，得到了以下达到我想要的效果：

div { 
 
    border-width: 1px; 
 
    -webkit-border-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0)) 0 0 100% 0; 
 
}

<div></div>

当然，这仅适用于webkit，但我怀疑另一个-o- *和-moz- *也会起作用。