Question

有没有办法让我可以从第二个例子中找到样式：

有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并得到以下内容以达到我想要的效果：

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

当然，这只适用于webkit，但我怀疑其他-o- *和-moz- *也能正常工作。

使用-webkit-border-image可以实现线性渐变？

1 个答案: