Czy mogę zastosować gradient webkit do obramowania lub tylko tła?

Question

Chciałbym więc, aby granica została wyblakła. Mam dokładnie te ustawienia gradientu webkitów, które chcę.

Nie wiem, jak zaimplementować element granicy.

Czy to możliwe? Jak mogę to zrobić?

Tylko proszę CSS3.

Btw, próbowałem następujące CSS i to nie działa:

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

Tak, można zastosować -webkit-gradient do granicy:

-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 Miły mały artykuł

Answer 3

Jeśli ktokolwiek jest zainteresowany, w ten sposób zastosowałem gradient prawej krawędzi na div, w którym górny i dolny koniec zanikają. Wydaje się jakby to trwało wieki, aby dowiedzieć się ... To jest tylko dla Safari jak robi to samo w Firefox jest o wiele łatwiejsze ...

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