html - -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-* 也能正常工作。