-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-* 也可以。