底部渐变边框

根据CSS 技巧 http://css-tricks.com/examples/GradientBorder/，以下 CSS 语法将导致左边框渐变。

.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;   
}

我正在尝试获取元素底部的边框渐变。

我尝试改变这个

    border-width:3px 0 3px 3px;

to this

border-width:0 0 3px 0;

this

border-width:0 3px 3px 3px;

它不起作用，任何人都可以帮助我让底部边框正常工作吗？

您可能需要 WebKit 浏览器才能执行此操作。

这是一把可供人们使用的小提琴；http://jsfiddle.net/HsTcf/ http://jsfiddle.net/HsTcf/

Thanks.

border-width: 0 0 3px 0;

是正确的。

然而，需要进行以下更改：

... -gradient(right, ...

需要改为

... -gradient(top, ...

and 1 100%; to 100% 1;.

Demo: jsfiddle.net/HsTcf/3 http://jsfiddle.net/HsTcf/3/