¿Puedo aplicar webkit-gradient a un borde o simplemente a un segundo plano?

Question

Así que me gustaría hacer que el borde se desvaneció. Tengo la configuración exacta de degradado de webkit que quiero.

Pero no estoy seguro de cómo implementarlo en el elemento de borde.

¿Es posible? ¿Cómo puedo hacer eso?

Solo CSS3 por favor.

Por cierto, he intentado el siguiente CSS y no funcionó:

border-color: -webkit-gradient(linear, left bottom, left top, color-stop(0.74, rgb(214,11,11)), color-stop(0.39, rgb(175,13,13)), color-stop(0.07, rgb(157,22,22))); 
    border-style: solid; 
    border-width: 10px; 

Answer 1

Sí, se puede aplicar a una frontera -webkit-gradient:

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

(from this example on webkit.org)

See the blog post on Webkit.org about -webkit-gradient

Answer 2

http://www.cssportal.com/css3-preview/borders.htm poco agradable del artículo

Answer 3

Si alguien está interesado, así es como apliqué un degradado de borde derecho en un div donde los extremos superior e inferior se desvanecen. Parece que se tardaba muchísimo para averiguar ... Esto es sólo para Safari como hacer lo mismo en Firefox es mucho más fácil ...

http://jsfiddle.net/fkFec/1102/

<div class="g"> 
    <div>bla</div> 
</div> 

.g { 
    border-right-width:1px; 
    -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, transparent), color-stop(0.5, grey), color-stop(0.5, grey), color-stop(1, transparent)) 0 100%; 
    border-right-width: 1px; 
    border-left-width: 0px; 
    border-top-width: 0px; 
    border-bottom-width: 0px; 
    padding: 2px; 
    width: 400px; 
    height: 150px; 
    margin: 10px auto; 
}