CSS3渐变边界(Gradient borders)

CSS3渐变边界(Gradient borders)

我试图对边框应用渐变，我以为这样做很简单：

border-color: -moz-linear-gradient(top, #555555, #111111);

这不行，有人知道边界渐变的正确方法是什么。

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

But this does not work.

Does anyone know what is the correct way to do border gradients?

最满意答案

WebKit现在（至少Chrome 12）支持渐变作为边框图像：

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink - http://www.webkit.org/blog/1424/css3-gradients/ 浏览器支持： http : //caniuse.com/#search=border-image

WebKit now (and Chrome 12 at least) supports gradients as border image:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/ Browser support: http://caniuse.com/#search=border-image